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,问题解决。
参考链接