uniapp 文件名后面增加版本号与时间戳

最新推荐文章于 2024-03-27 16:53:46 发布

shaoin_2

最新推荐文章于 2024-03-27 16:53:46 发布

阅读量3.9k

点赞数 6

分类专栏： uniapp H5 文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_49175501/article/details/117694487

版权

uniapp 同时被 2 个专栏收录

40 篇文章 8 订阅

订阅专栏

24 篇文章 0 订阅

订阅专栏

需求描述

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

解决问题

一、vue.config.js

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

二、文件名重构

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

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
    },
  },
}