需求描述

uniapp 打包 H5 生成的js文件，默认情况下是不包含版本号以及时间戳后缀。这样会导致H5新版打包上线后，用户依旧使用的是浏览器中缓存的老版js文件。文件更新滞后等现象。

解决问题

一、vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载无需引入。这个配置文件中有一个属性 configureWebpack 可以有效的解决 js 文件缓存的问题。

二、文件名重构

js文件直接下载：vue.config.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let filePath = '';   // 默认文件路径
let TimeStamp = '';  // 时间戳
let Version = '-V2.0.0-'; // 版本号
//编译环境判断，可以根据不同环境来做相应的配置
if (process.env.UNI_PLATFORM === 'h5') {
  filePath = 'static/js/'
  TimeStamp = new Date().getTime();
}

module.exports = {
  configureWebpack: {
    output: { // filePath: 路径 name: 默认文件名 Version: 版本号 TimeStamp: 时间戳; 重构文件名
      filename: `${filePath}[name]${Version}${TimeStamp}.js`, // static/js/index-V2.0.0-1623123456789.js
      chunkFilename: `${filePath}[name]${Version}${TimeStamp}.js` // static/js/pages-home-index-V2.0.0-1623123456789.js
    },
  },
}

可以根据需求可控的添加时间和版本号，或者自定义相关后缀。如上就可以解决需求，完成 重构文件名。

更多 vue.config.js 相关配置属性 大家可以查看 vue.conf.js配置参考