解决Vue异步组件Vue-Router懒加载错误SyntaxError: Unexpected token import

错误原因

在项目中使用了 Babel，import需要添加 syntax-dynamic-import 插件，Babel 才可以正确地解析语法。

开发环境

@vue/cli: 4.xxx 创建的Vue项目

解决办法

1. 安装 @babel/plugin-syntax-dynamic-import

cnpm install @babel/plugin-syntax-dynamic-import -D

2.babel.config.js

module.exports = {
  ......
  plugins: [
    "@babel/plugin-syntax-dynamic-import"
  ]
}

3. .eslintrc.js
parserOptions 下面加上选项 "parser": "babel-eslint"

module.exports = {
    "parserOptions": {
        "parser": "babel-eslint",
    ......

参考链接

1.Vue-Router官方文档 路由懒加载
2. Babel配置 @babel/plugin-syntax-dynamic-import