Vue+Webpack动态组件导入原理及Django生产环境配置问题

你遇到的带哈希命名的文件是webpack代码分割功能生成的异步chunk：
当你使用() => import()动态导入组件时，webpack会自动把该组件拆成独立的单独文件，不需要你手动在Django模板中引入，Vue运行时会在需要用到对应组件时自动发起请求加载这些文件。
你之前配置的filenameHashing: false仅对入口chunk、同步公共chunk生效，不会影响异步chunk的默认命名规则，所以才会出现仅动态生成的文件带哈希的情况。

你当前项目运行异常的核心原因是publicPath配置不匹配：你的Django静态资源访问路径带有/static/前缀，但你配置的publicPath: "/front/"没有包含该前缀，导致Vue运行时拼接异步chunk的请求路径错误，出现404。

方案1：适配Django静态资源路径（推荐） #

不需要修改chunk命名规则，只要修正publicPath配置即可，异步chunk会自动按正确路径加载，完全不需要手动引用：

module.exports = {
  // 其他原有配置保持不变
  // 将publicPath改为Django静态资源的实际访问前缀
  publicPath: "/static/front/",
}

该方案保留异步chunk的哈希值，能利用浏览器缓存机制提升生产环境加载速度，文件内容变更时哈希会自动更新，避免旧缓存影响新版本发布。

方案2：关闭异步chunk的哈希命名 #

如果你需要所有产物文件名完全固定，可以追加webpack配置修改异步chunk的命名规则，去掉哈希后缀：

module.exports = {
  // 其他原有配置保持不变
  configureWebpack: {
    output: {
      chunkFilename: 'js/[name].js'
    }
  }
}

修改后动态生成的异步chunk会直接使用组件名作为文件名，不会再带哈希后缀。

• vue-cli-service serve是启动开发服务，默认将编译产物存在内存中，你配置的writeToDisk: true会强制将产物写入磁盘，逻辑和生产构建一致。
• vue-cli-service build生成的产物中，仅入口文件（main.js、chunk-vendors.js）需要手动在Django模板中引入，其余异步chunk全部由Vue运行时自动加载，无需手动处理。

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