Vue异步组件在Webpack热模块替换开发环境下加载失败如何解决？

你的配置缺少异步chunk的命名规则，同时开发环境HMR运行时需要资源路径完全匹配才能正确加载动态导入的组件：

• 生产环境构建会生成全量的资源映射表，即使没有配置chunk命名也可以正常生成异步chunk资源
• 开发环境开启HMR后，webpack runtime需要通过明确的chunk命名规则定位异步组件对应的更新资源，否则会出现路径匹配失败，触发组件加载报错

按以下步骤调整配置即可解决：

1. 给webpack的output配置新增chunkFilename字段，指定动态导入生成的异步chunk的命名规则：

output:{
     path: path.resolve(__dirname, 'dist'),
     filename: '[name].bundle.js' ,
     // 新增异步chunk配置，contenthash适配HMR的增量更新逻辑
     chunkFilename: '[name].[contenthash:8].async.js',
     publicPath: "http://localhost:8088/",
}

2. 确认webpack-dev-server的publicPath配置和output的publicPath完全一致，避免资源路径跨域或不匹配：

devServer: {
  port: 8088,
  publicPath: "http://localhost:8088/",
  hot: true,
  // 可选配置：开启historyApiFallback避免单页路由刷新404
  historyApiFallback: true
}

3. （可选优化）给异步组件的动态导入语句添加chunk命名标记和开发环境错误兜底，提升HMR场景下的稳定性：

Vue.component('product-page', ()=> import(/* webpackChunkName: "product-page" */ './app/components/ProductPage.vue').catch(err => {
  // 开发环境偶发HMR增量更新失败时自动整页刷新恢复
  if (process.env.NODE_ENV === 'development') {
    window.location.reload()
  }
  return Promise.reject(err)
}));

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