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

Question

我试图为我的登录路由延迟加载 Login组件.在构建webpack时,我得到:

SyntaxError: Unexpected Token

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

我很困惑,因为我相信这段代码应该基于这个博客.

下面失败的行是:

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未配置规范!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模块

动态导入

Stage-2 Babel Preset