Vue路由器 - 无法延迟加载组件 - 意外令牌答案

【问题标题】：Vue router - cannot lazy load component - Unexpected TokenVue路由器 - 无法延迟加载组件 - 意外令牌
【发布时间】：2017-12-26 09:49:06
【问题描述】：

我正在尝试lazy load 我的登录路由的登录组件。在构建 webpack 时，我得到：

SyntaxError: Unexpected Token

如果我以与 Home 路由相同的方式导入和分配它，Login.vue 组件可以正常工作。

我很困惑，因为我相信这段代码应该基于this blog 工作。

下面失败的行是：

component: () => import('../components/Login.vue'),

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home.vue'


Vue.use(VueRouter)


export default new VueRouter({
    mode: 'history',

    routes: [
        {
            path: '/',
            name: 'home',
            component: Home,
            meta: {
                permission: "anonymous",
            },
        },

        {
            path: '/login/',
            name: 'login',
            component: () => import('../components/Login.vue'),
            meta: {
                permission: "anonymous",
            },
        },
    ],
})

package.json

"dependencies": {
    "vue": "^2.3.4"
},
"devDependencies": {
    "babel-core": "^6.25.0",
    "babel-eslint": "^7.2.2",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-2": "^6.22.0",
    "cross-env": "^3.0.0",
    "css-loader": "^0.26.4",
    "eslint": "^3.12.2",
    "eslint-config-standard": "^6.2.1",
    "eslint-friendly-formatter": "^2.0.5",
    "eslint-loader": "^1.5.0",
    "eslint-plugin-html": "^1.7.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^2.0.1",
    "file-loader": "^0.9.0",
    "less": "^2.7.2",
    "less-loader": "^4.0.5",
    "style-loader": "^0.18.2",
    "uiv": "^0.11.4",
    "vee-validate": "^2.0.0-rc.7",
    "vue-acl": "^2.1.10",
    "vue-js-cookie": "^2.0.0",
    "vue-loader": "^13.0.2",
    "vue-quill-editor": "^2.2.4",
    "vue-resource": "^1.3.4",
    "vue-router": "^2.7.0",
    "vue-template-compiler": "^2.1.0",
    "vuex": "^2.3.1",
    "webpack": "^2.7.0",
    "webpack-bundle-tracker": "^0.2.0",
    "webpack-dev-server": "^2.5.1"
}

编译错误截图

【问题讨论】：

你使用的是什么版本的 webpack？
抱歉，耽搁了。我不得不照顾哭闹的婴儿。在家工作的双刃剑 :-)
我用 package.json 详细信息扩展了我的原始问题。 Webpack 版本 2.7.0
@pymarco 您能否添加有关此SyntaxError: Unexpected Token 的更多详细信息？目前我们不知道它是否真的来自您的 router.js 文件！
@IvanVilanculo，我已将屏幕截图添加到 OP。

标签： webpack ecmascript-6 vue.js vue-component vue-router

【解决方案1】：

您的 webpack 未配置规范！所以有两种方法可以解决您的问题！

第一个是将所有出现的import('path/to/component.vue')更改为System.import('path/to/component.vue')

第二个是使用带有以下配置的 BABEL

.babelrc

{
  "presets": [
    ["es2015", { "modules": false }],
    "stage-2"
  ],
  "plugins": [
    "transform-export-extensions"
  ]
}

资源

ES6 Modules

Dynamic Import

Stage-2 Babel Preset

【讨论】：

谢谢。两种方法都有效。我创建了一个 .babelrc 文件，除了我删除了“插件”部分。干杯
这行得通，但是当它是 System.import('./components/Component.vue') 时如何对组件进行分组？
@Tadas 你能解释一下你的问题吗？
感谢这个答案，我删除了 babel 并解决了我的问题 :)

【解决方案2】：

以下解决方案可以与这些版本的依赖项一起使用：

"laravel-mix": "^2.1.11", 
"vue-router": "^3.0.1",

component: (resolve) => { require(['../components/' + nameComponent + '.vue'], resolve); }

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性的 cmets 挤满你的代码，这会降低代码和解释的可读性！

【解决方案3】：

您是否使用vue-webpack template 开始您的项目并使用JavaScript Standard Style 对其进行lint？如果是，只需更新您的 package.json 以包括：

"standard": {
    "parser": "babel-eslint",
    "ignore": [
        "build"
    ]
}

这将忽略文本编辑器上的任何错误警告Unexpected token import。

【讨论】：

【解决方案4】：

在 .eslintrc.js 文件中添加 parser 和 parserOptions 对我有用。 This answer帮了我

【讨论】：