webpack vue-router 延迟加载答案

【问题标题】：webpack vue-router lazy loadingwebpack vue-router 延迟加载
【发布时间】：2018-03-15 00:08:49
【问题描述】：

来自 vue-router documentation 延迟加载组件我使用的语法：

const Foo = () => import('./Foo.vue')

我有错误：

    client?cd17:49 ./src/routes.js
Module build failed: SyntaxError: Unexpected token (5:19)

  3 | 
  4 | //const User = () => System.import('./components/user/User.vue');
> 5 | const User = () => import('./components/user/User.vue')
    |                    ^
  6 | const UserStart = () => System.import('./components/user/UserStart.vue');
  7 | const UserDetail = () => System.import('./components/user/UserDetail.vue');
  8 | const UserEdit = () => System.import('./components/user/UserEdit.vue');

BabelLoaderError: SyntaxError: Unexpected token (5:19)

  3 | 
  4 | //const User = () => System.import('./components/user/User.vue');
> 5 | const User = () => import('./components/user/User.vue')
    |                    ^
  6 | const UserStart = () => System.import('./components/user/UserStart.vue');
  7 | const UserDetail = () => System.import('./components/user/UserDetail.vue');
  8 | const UserEdit = () => System.import('./components/user/UserEdit.vue');

    at transpile (/app/node_modules/babel-loader/lib/index.js:61:13)
    at Object.module.exports (/app/node_modules/babel-loader/lib/index.js:163:20)
 @ ./src/main.js 4:0-34
 @ multi main
errors @ client?cd17:49
sock.onmessage @ client?cd17:83
EventTarget.dispatchEvent @ eventtarget.js?3e89:51
(anonymous) @ main.js?45b8:274
SockJS._transportMessage @ main.js?45b8:272
EventEmitter.emit @ emitter.js?927b:50
WebSocketTransport.ws.onmessage @ websocket.js?c17e:35

之后我已经安装了

npm install --save-dev babel-preset-stage-2

和

npm install --save-dev babel-plugin-transform-export-extensions

还将 .babelrc 文件配置为：

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

没有任何帮助，如何使用 const Foo = () => import('./Foo.vue') 语法通过 webpack 和 vue-router 懒加载组件？

【问题讨论】：

您正在执行异步方式，因此特定方法不能只是在分配时导入组件。这可能会对您有所帮助 - vuejsdevelopers.com/2017/07/03/vue-js-code-splitting-webpack
你使用什么版本的 webpack？

标签： webpack vue.js lazy-loading vue-router

【解决方案1】：

安装所需的 babel 插件：

npm install --save-dev babel-plugin-syntax-dynamic-import

在您的项目根目录中创建 .babelrc，在文件中包含以下短代码：

{
    "plugins": ["syntax-dynamic-import"]
}

你可以用这种方式导入之后：

const Foo = () => import('./Foo.vue')

最后运行 npm build(vue-cli) 或 npm run watch(laravel)

【讨论】：