Vue CLI3项目执行npm run build未生成manifest.js问题咨询

我来帮你理清这个问题哈～

一、这确实是Webpack的配置项问题 #

先明确一下：manifest.js是Webpack用来管理模块映射关系的文件，核心作用是优化长效缓存——当你的业务代码（app.js）或第三方依赖（vendor.js）更新时，它能帮浏览器识别到模块关联的变化，避免加载缓存里的旧资源。

二、Vue CLI3 默认不生成manifest.js的原因 #

Vue CLI3 其实已经帮你做了更高效的缓存优化，只是没把这部分代码单独抽成文件：

• 它默认把原本属于manifest的runtime代码（也就是模块映射逻辑）直接内联到了dist目录的index.html里，而不是生成单独的manifest.js。这么做的好处是少发一次HTTP请求，能稍微提升页面加载速度，同时缓存优化的效果一点没打折扣。
• 你可以打开dist里的index.html看看，里面肯定有一段短的内联脚本，那就是原本manifest的内容啦。

三、怎么配置生成单独的manifest.js #

如果你的项目确实需要单独的manifest.js文件，只需要在项目根目录的vue.config.js（没有的话就新建一个）里加一段配置就行：

1. 创建/编辑vue.config.js：

module.exports = {
  configureWebpack: {
    optimization: {
      runtimeChunk: {
        name: 'manifest'
      }
    }
  }
}

2. 重新执行npm run build，这次dist目录里就会出现单独的manifest.xxx.js文件了。

小提醒：单独生成manifest.js会多一次HTTP请求，适合需要对缓存做更精细控制的场景，要不要开启得根据你的项目需求来权衡哦～

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