Vue路由懒加载报错问题解决

使用Vue路由懒加载时报了以下错误:
Vue路由懒加载报错问题解决_第1张图片
经过百度发现,出现该问题的原因是: import 属于异步引用组件,需要特殊的babel-loader处理

解决办法:

  1. 安装babel用来编译import异步引用方法的模块 babel-plugin-syntax-dynamic-import
cnpm install babel-plugin-syntax-dynamic-import -D
  1. .bablerc中引入syntax-dynamic-import插件
  {
    "presets": ["env"],
    "plugins": ["syntax-dynamic-import"]
  }

到这一步,配置就搞定了。但是我在运行时又报出了以下错误:
Vue路由懒加载报错问题解决_第2张图片
出现这个问题的原因是:项目里面引入了mui.min.js文件,babel在将js文件转码为ES5时,默认使用严格模式,而在严格模式下,为了安全起见是不能用caller,callee,arguments等属性的

解决办法:修改bablerc文件的配置,让项目忽略第三方js的转码

.bablerc中设置忽略第三方JS文件

{
  "presets": [],
  "plugins": [],
  //主要是添加以下代码
  "ignore": [
    "./src/lib/mui/js/*.js"
  ]
}

到此,重新运行即可。

你可能感兴趣的:(前端)