我之前在vue-cli 2.x + webpack 3的环境下也碰到过几乎一模一样的问题，结合你的情况，给你几个实际可行的排查和解决方向：

1. 规范动态导入语法，避免直接调用__webpack_require__ #

你当前用的是底层的__webpack_require__递归懒加载语法，这种方式很容易因为路径匹配规则或webpack解析逻辑出问题。建议改用标准的import()动态导入语法，让webpack自动处理chunk打包：

// 替换原来的__webpack_require__调用，改成这种形式
const FieldComponent = () => import(`./types/field-${this.type}.vue`)

注意：这里的路径要确保固定部分足够明确，比如./types/是固定目录、field-是文件名前缀，webpack需要通过这些固定部分提前扫描到所有可能的组件文件，才能正确打包对应的chunk。如果你的组件不在./types/目录下，记得改成实际路径。

2. 检查webpack公共路径（publicPath）配置 #

这是最常见的诱因！如果你的项目部署在非根目录（比如http://xxx.com/your-app/），但vue-cli默认的assetsPublicPath是/，就会导致chunk文件加载时路径错误，报Loading chunk失败。

• 打开config/index.js，找到build配置项，修改assetsPublicPath为实际部署路径：

  module.exports = {
    build: {
      // 比如部署在子目录your-app下，就改成这个
      assetsPublicPath: '/your-app/',
      // ...其他配置
    }
  }
  

• 执行npm run build后，检查dist/index.html里的js、css引用路径是否正确，确保chunk文件的加载路径是可访问的。

3. 确认vue-loader的esModule配置是否生效 #

你已经尝试设置esModule: false，但要确保配置在正确的位置：

• 打开build/webpack.base.conf.js，找到vue-loader的规则，添加options配置：

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          esModule: false,
          // ...其他vue-loader配置
        }
      }
    ]
  }
  

• 因为vue-cli 2.x配套的vue-loader版本通常是13.x，这个版本默认esModule为true，关闭后能避免一些组件导出的兼容问题。

4. 确保webpack支持动态import语法 #

webpack 3本身不支持import()语法，需要借助babel插件来解析：

• 安装插件：npm install babel-plugin-syntax-dynamic-import --save-dev
• 打开.babelrc，添加这个插件到配置中：

  {
    "presets": ["env", "stage-2"],
    "plugins": ["syntax-dynamic-import"]
  }
  

• 重新执行npm run build，检查chunk文件是否正常生成在dist/static/js/目录下。

5. 排查chunk文件是否正确生成 #

执行npm run build后，去dist/static/js/目录下查看是否有对应的chunk文件（比如0.js）：

• 如果没有生成，说明webpack没有识别到你的动态导入组件，要检查组件文件路径是否正确、文件名是否符合field-xxx.vue的格式，有没有大小写不一致的情况（比如代码里是field-text，但实际文件名是Field-Text.vue）。
• 如果文件存在，但加载时还是报错，那就回到第2步检查公共路径是否配置正确。

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