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

您的网站包未配置规格！ Só有两种方法可以解决您的问题！

第一个是将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来启动项目并使用JavaScript Standard Style对其进行抹平？如果是，只需将package.json更新为包含以下内容：

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

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

Answer 4

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

Vue路由器 - 不能延迟加载组件 - 意外令牌

router.js

的package.json

编译错误的屏幕截图

4 个答案: