Vue如何实现打包资源按时间戳方式

vue打包资源按时间戳

问题

由于默认的Vue打包是基于资源文件的hash模式，但是由于浏览器缓存，在实际发版过程中会出现引用老版本的问题。

解决

修改Vue资源打包，在资源文件后加上打包时间戳，以保证每次发版后，所有资源均为最新，避免缓存引用问题，尽管牺牲掉发版后文件加载的效能问题，但是也解决了潜在的缓存问题。

修改

修改“vue.config.js”文件配置：

const Timestamp = new Date().getTime();

module.exports = {

.......

  css: {
    extract: {
      filename: `css/[name].${Timestamp}.css`,
      chunkFilename: `css/[name].${Timestamp}.css`
    }
  },
  chainWebpack: config => {
    config.output.filename(`js/[name].${Timestamp}.js`)
    config.output.chunkFilename(`js/[name].${Timestamp}.js`)
.......

vue打包添加时间戳,实现更新项目自动清除缓存（webpack/vue-cli打包两种方式）

本来vue打包会自动用chunkhash来解决缓存问题，但是部分浏览器不会自动更新，因此通过增加时间戳不同来实现自动重新加载文件，保持最新的界面。

webpack打包

修改build/webpack.prod.conf.js文件

使用vue-cli打包

修改vue.config.js文件

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。