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

Question

我正在尝试 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"
}

编译错误截图

Answer 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

Answer 2

以下解决方案可用于这些版本的依赖项：

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

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

Answer 3

您是否使用 vue-webpack template to start your project and use JavaScript Standard Style 对其进行了 lint？如果是，只需更新您的 package.json 以包括：

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

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

Answer 4

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

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

Vue router - cannot lazy load component - Unexpected Token

ecmascript-6

webpack

vue.js

vue-router

vue-component

router.js

package.json

编译错误截图