Vue.js 异步加载组件报错问题解决

2018-07-16
webpack
4095

Vue.js 异步加载组件一般的写法如下:

const example = resolve => require(['./components/example.vue'], resolve);

后来在官方有发现一个新的写法

const example = () => import('./components/example.vue');

但是新方法在webpack打包时,出现了如下错误

Syntax Error: Unexpected token (10:25)

   8 |     el: '#app',
   9 |     components: {
> 10 |         'example': () => import('./components/example')
     |                          ^
  11 |     }
  12 | });

查阅资料后,找到解决方案:

  • 安装babel 插件babel-plugin-syntax-dynamic-import
npm install --save-dev babel-plugin-syntax-dynamic-import
  • 在根目录创建.babelrc文件,添加上面的插件
{
    "plugins": ["syntax-dynamic-import"]
}

OK,问题解决。

参考链接

https://github.com/JeffreyWay/laravel-mix/issues/1249