vue打包添加版本號或時間戳，實現更新項目自動清除緩存

本來vue打包會自動實現hash來解決緩存問題，但是在部分瀏覽器沒有自動更新到，我這邊在微信打開遇到這問題。

默認自動打開的格式類似這樣子：

[name].[contenthash].css

 

 

 

然而我想要的格式是

[name].[contenthash].css?t=${Timestamp}

通過后面t=xxxx的不同從而實現自動重新加載文件，保持最新的界面。

 

在使用webpack打包的情況下：

在目錄：build/webpack.xxx.conf.js文件

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

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath(`js/[name].[chunkhash].${Timestamp}.js?t=${Timestamp}`),
    chunkFilename: utils.assetsPath(`js/[id].[chunkhash].${Timestamp}.js?t=${Timestamp}`)
  },

new ExtractTextPlugin({
      filename: utils.assetsPath(`css/[name].[contenthash].css?t=${Timestamp}`),
      allChunks: true,
    }),

 

在使用vueCli情況下：

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

chainWebpack(config) {
    // config.output.filename(`static/js/[name].[contenthash].js?v=${Timestamp}`).end()
    config.output.chunkFilename(`static/js/[name].[contenthash].js?t=${Timestamp}`).end()
    config.plugin('extract-css').tap(args => [{
      filename: `static/css/[name].[contenthash].css?t=${Timestamp}`,
      chunkFilename: `static/css/[name].[contenthash].css?t=${Timestamp}`
    }])
  },

因為項目使用了懶加載理由，所有chunk_xxx的文件，所有沒有使用第一句（已注釋）。