vue cli 自定义 --mode 参数 build 打包之后文件名 hash 丢失

项目开发少不了几个测试环境运行之后才能上线，比如：开发环境，测试环境，预生产环境，生产环境等等。

vue cli在打包项目时候，提供了可配置的环境变量，允许配置不同环境参数。官方文档：https://cli.vuejs.org/zh/guide/mode-and-env.html

使用方式

如图：

如果刚好自定义了一个环境配置，比如上图中的 .env.preview ，又刚好没有在配置中添加 NODE_ENV 参数。

这时如果执行 vue-cli-service build --mode preview 命令，会发现打包没问题，但是打包出来的文件名会变成数字状态，并且无hash值。

如图：

将以上文件部署到对应环境，也能运行，但是架不住测试迭代修复问题啊，原因是，每次 build 之后文件名是一样的，浏览器会存在缓存，无法更新文件。

处理办法

webpack 的文件名 hash 后缀的应用场景就是处理浏览器缓存，所以我们只需要把这个hash给加上就OK。

翻了一下官方文档，build 命令会根据 NODE_ENV 配置打包不同的环境，所以我们只需要在 .env.preview 中加上 NODE_ENV 即可。

如下：

.env.preview

NODE_ENV='production'
VUE_APP_RUN_ENV = 'preview'
# ...其他配置

添加配置之后再次打包，效果如下：

会有一些文件大小警告，忽略即可。

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2021-11-04/vue-cli-mode-hash/

如果您觉得文章不错，可以点击文章中的广告支持一下！