Vue解决每次部署项目后都需要清理缓存才生效的问题

2023/5/22 Vue

解决办法:vue 中给打包的文件指定自定义文件名以及加上[哈希]值解决每次打包上线存在缓存问题

高版本 vue-cli 脚手架自动解决了这个问题

低版本 vue-cli 或者 webpack 需要自己配置

在output中给文件命名加上hash:8
output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[hash:8].js'),
    chunkFilename: utils.assetsPath('js/[id].[hash:8].js')
  },
  响应的css文件输出时也加上hash:8
  new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[hash:8].css'),
      allChunks: true
    }),

1
2
3
4
5
6
7
8
9
10
11
12

module.exports = {
  filenameHashing: true, // 打包后为文件名增加hash值
  chainWebpack: config => {
    config.output.filename('js/[name].[hash].js').end()

    // 如果filenameHashing设置为了false,可以通过这段代码给打包出的css文件增加hash值
    // config.plugin('extract-css').tap(args => [{
    //   filename: 'assets/css/[name].[hash].css',
    //   chunkFilename: 'assets/css/[name].[hash].css'
    // }])
  }
1
2
3
4
5
6
7
8
9
10
11
12
Last Updated: 2023/5/26 10:47:56