Vue2 实现组件懒加载时 Eslint 报 import 语法错误如何解决

Vue2完全支持组件懒加载需求。你遇到的Parsing error: Unexpected token import报错，是ESLint默认解析器不识别import()动态导入语法导致的，按以下步骤处理即可：

• 第一步安装Babel动态导入语法支持插件

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

• 第二步修改Babel配置文件（.babelrc 或 babel.config.js），新增插件配置

  {
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
  }
  

• 第三步修改ESLint配置文件（.eslintrc.js 或 .eslintrc.json），调整解析规则适配新语法

  module.exports = {
    // 未使用Babel解析器的项目需要先指定解析器
    parser: '@babel/eslint-parser',
    parserOptions: {
      ecmaVersion: 2020,
      sourceType: 'module'
    }
  }
  

可选替代方案 #

如果你不想修改现有项目配置，可以直接使用Vue2官方原生支持的异步组件写法，无需额外依赖即可直接生效：

new Vue({
  components: { 
    Fibonacci: resolve => require(['./Fibonacci.vue'], resolve)
  }
})

内容的提问来源于stack exchange，提问作者Alex