Vue项目部署，解决js、css、img被缓存问题

淡淡的烟草味﹌ 2022-11-03 04:21 8阅读 0赞

@Tip：本文解决的只是index.html 中引入的js、css、img 等文件的缓存。但是 index.html 这个文件也可能会缓存。网上很多说：解决index.html 都是Nginx。目前博主使用的是Tomcat。我是用了一个Filter的方式来处理index.html 的缓存问题。刚上线2天，正在调试中，目前没收到任何关于缓存的问题。后续测试没问题会附上如何通过Filter方式 解决 index.html 缓存的方案。敬请期待。

> 文章已更新：[vue部署至tomcat，解决index.html被缓存的问题][vue_tomcat_index.html]

--------------------

### 本文目录 ###

*   *  前言
     *  一、根目录index.html
     *  二、配置vue.config.js
     *   *  直接上代码【使用时间戳】
     *  三、最终效果
     *   *  1.css打包后
         *  2.img打包后
         *  3.js打包后
     *  总结

--------------------

## 前言 ##

部署前端项目以后，你会发现一个问题（为什么必须刷新页面，页面才会更新到最新版本），其实就是因为服务器缓存的问题，接下来我就以我自己所用的方案来解决自动清除缓存的问题。

## 一、根目录index.html ##

在head标签中，加入下面的代码

![在这里插入图片描述][20201029112941862.png]

## 二、配置vue.config.js ##

### 直接上代码【使用时间戳】 ###

代码如下（示例）：

const Version = new Date().getTime()
    
    module.exports = { 
    	css: { 
    	    loaderOptions: { 
    	      sass: { 
    	        data: `@import "@/components/themes/_handle.scss";`
    	      }
    	    },
    	    // 是否使用css分离插件 ExtractTextPlugin
    	    extract: { 
    	      // 修改打包后css文件名 // css打包文件，添加时间戳
    	      filename: `static/css/[name].${ Version}.css`,   // 此处static/css/xxx 目录根据自己打包情况来定,我使用的就没有static一层,所以直接去掉static即可。根据自己项目决定
    	      chunkFilename: `static/css/[name].${ Version}.css`
    	    }
    	 },
    	 configureWebpack: { 
    		 output: {  // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
    		      // filename: utils.assetsPath('js/[name].[chunkhash].'+Version+'js'),
    		      // chunkFilename: utils.assetsPath('js/[id].[chunkhash].'+Version+'js')
    		      filename: `static/js/[name].${ Version}.js`,         // js打包文件，添加时间戳
    		      chunkFilename: `static/js/[name].${ Version}.js`
    		    }
    	},
    	chainWebpack(config) { 
    		// img的文件名修改 // img打包文件，添加时间戳
    	    config.module
    	      .rule('images')
    	      .use('url-loader')
    	      .tap(options => { 
    	        options.name = `static/img/[name].${ Version}.[ext]`
    	        options.fallback = { 
    	          loader: 'file-loader',
    	          options: { 
    	            name: `static/img/[name].${ Version}.[ext]`
    	          }
    	        }
    	        return options
    	      })
    	}
    }

## 三、最终效果 ##

### 1.css打包后 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6YjM0ODExMDE3NQ_size_16_color_FFFFFF_t_70]

### 2.img打包后 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6YjM0ODExMDE3NQ_size_16_color_FFFFFF_t_70 1]

### 3.js打包后 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6YjM0ODExMDE3NQ_size_16_color_FFFFFF_t_70 2]

## 总结 ##

以上就是今天要讲的内容，有效的解决了部署以后自动更新缓存的问题，不需要在手动刷新页面去更新。

> ————————————————  
> 版权声明：本文为CSDN博主「不cong明的亚子」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。  
> 原文链接：https://blog.csdn.net/qq\_36579455/article/details/109355483

[vue_tomcat_index.html]: https://blog.csdn.net/lzb348110175/article/details/115000922
[20201029112941862.png]: /images/20221024/9e66c3aeb8654533ac3afc15bd511b19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6YjM0ODExMDE3NQ_size_16_color_FFFFFF_t_70]: /images/20221024/5b78b449a5d04b809d5a14fbc13f393b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6YjM0ODExMDE3NQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/909cd1ed336745ceba410ff5a5e28f7d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6YjM0ODExMDE3NQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/edc706ad1d654593800c2b84b25499e6.png