Vue路由器 - 无法懒加载组件 - 意外的令牌

Question

我正在尝试惰性加载登录路由的登录组件。在构建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"
}

编译错误的截图

- pymarco

---

你正在使用哪个版本的webpack？ - thanksd

抱歉，让您久等了。我必须照顾哭闹的宝宝。在家工作的利弊参半 :-) - pymarco

我已经在原始问题中加入了package.json细节。Webpack版本为2.7.0。 - pymarco

@pymarco，你能否提供关于SyntaxError: Unexpected Token的更多细节？目前我们不确定是否真的来自你的router.js文件！ - Ivan Vilanculo

是的！就是这样！你想把它发布为答案，这样我就可以接受了吗？谢谢Ivan！ - pymarco

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模块

动态导入

阶段2的Babel预设

- Ivan Vilanculo

---

谢谢。两种方法都有效。我已经创建了一个 .babelrc 文件，只是删除了 "plugins" 部分。干杯。 - pymarco

可以这样做，但是当使用System.import（'./components/Component.vue'）时，如何对组件进行分组？ - Tadas Stasiulionis

@Tadas，您能详细解释一下您的问题吗？ - Ivan Vilanculo

感谢这个答案，我移除了 Babel 并解决了我的问题 :) - Daniel

Answer 2

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

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

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

- Wiicho Orozco

---

虽然这段代码片段可能解决了问题，但包括解释真的有助于提高您的帖子质量。请记住，您正在为未来的读者回答问题，而这些人可能不知道您的代码建议原因。请尽量不要在代码中添加过多的解释性注释，这会降低代码和解释的可读性！ - Filnor

Answer 3

在 .eslintrc.js 文件中添加 parser 和 parserOptions 对我有用。这个答案 帮助了我。

- franciscorode

Answer 4

你是否使用了vue-webpack模板来启动项目，并使用JavaScript标准风格进行代码检查？如果是的话，只需更新package.json文件，包含以下内容：

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

这将忽略您文本编辑器上出现的任何错误警告意外令牌导入。

- Raynal Gobel