vue 部署上線清除瀏覽器緩存的方式

更新時(shí)間：2022年08月03日 10:08:07 作者：三個(gè)木馬人

這篇文章主要介紹了vue 部署上線清除瀏覽器緩存的方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

部署上線清除瀏覽器緩存

vue 項(xiàng)目打包上線之后，每一次都會(huì)有瀏覽器緩存問題，需要手動(dòng)的清除緩存。這樣用戶體驗(yàn)非常不好，所以我們在打包部署的時(shí)候需要盡量避免瀏覽器的緩存。

下面是我的解決方案：

修改根目錄index.html

在 head 里面添加下面代碼

<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

這種會(huì)讓所有的css/js資源重新加載

配置 nginx 不緩存 html

vue默認(rèn)配置，打包后css和js的名字后面都加了哈希值，不會(huì)有緩存問題。但是index.html在服務(wù)器端可能是有緩存的，需要在服務(wù)器配置不讓緩存index.html

server {
listen 80;
server_name yourdomain.com;
location / {
    try_files $uri $uri/ /index.html;
    root /yourdir/;
    index index.html index.htm;

    if ($request_filename ~* .*\.(?:htm|html)$)
    {
        add_header Cache-Control "no-cache, no-store";  //對html文件設(shè)置永遠(yuǎn)不緩存
    }  
  }
}

no-cache瀏覽器會(huì)緩存，但刷新頁面或者重新打開時(shí) 會(huì)請求服務(wù)器，服務(wù)器可以響應(yīng)304，如果文件有改動(dòng)就會(huì)響應(yīng)200
no-store瀏覽器不緩存，刷新頁面需要重新下載頁面

打包的文件路徑添加時(shí)間戳

1、在 vue-cli2.x 創(chuàng)建的項(xiàng)目里，找到 build/webpack.prod.conf.js 文件

//定義一個(gè)變量獲取當(dāng)前時(shí)間戳
const version = new Date().getTime();
//output模塊將時(shí)間戳加入到輸出的文件名里
output: {
  publicPath: '/',
  path: config.build.assetsRoot,
  filename: utils.assetsPath(`js/[name].[chunkhash].${version}.js`),
  chunkFilename: utils.assetsPath(`js/[id].[chunkhash].${version}.js`)
},

//css文件名加時(shí)間戳
new ExtractTextPlugin({
    filename: utils.assetsPath(`css/[name].[contenthash].${version}.css`),
    allChunks: true,
}),

2、在 vue-cli3.x 創(chuàng)建的項(xiàng)目里，打開 vue.config.js 文件 ( 沒有該文件自己在 src 同級目錄下創(chuàng)建一個(gè) )

const version = new Date().getTime();
module.exports = {
  	outputDir: 'dist', //打包的時(shí)候生成的一個(gè)文件名
	lintOnSave: false,
  	productionSourceMap: false,
  	css: {
	    loaderOptions: {
	      sass: {
	        data: `@import "@/components/themes/_handle.scss";`
	      }
	    },
	    // 是否使用css分離插件 ExtractTextPlugin
	    extract: {
	      // 修改打包后css文件名   // css打包文件，添加時(shí)間戳
	      filename: `css/[name].${version}.css`,   
	      chunkFilename: `css/[name].${version}.css`
	    }
	 },
  	configureWebpack: {
		output: { // 輸出重構(gòu)  打包編譯后的 文件名稱  【模塊名稱.版本號(hào).時(shí)間戳】
		     filename: `js/[name].[chunkhash].${version}.js`,
		     chunkFilename: `js/[id].[chunkhash].${version}.js`
		}
	}
}

效果：

vue項(xiàng)目部署,清理緩存方式

1.index.html

<!--清除瀏覽器中的緩存 -->
<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

2.vue.config.js

const timeUpdate ?= new Date().getTime();
module.exports = {
? // 解決發(fā)布生產(chǎn)以后有緩存的問題
? // 輸出重構(gòu) ?打包編譯后的 文件名稱 ?【模塊名稱.版本號(hào).時(shí)間戳】
? //一般情況下，該方法就能解決。
? configureWebpack: {
? ? output: {
? ? ? filename: `[name].js?v=${timeUpdate}`,
? ? ? chunkFilename: `[name].js?v=${timeUpdate}`
? ? },
? },
? // 修改打包后css文件名
? css: {
? ? loaderOptions: {
? ? ? sass: {
? ? ? ? data: `@import "@/components/themes/_handle.scss";`
? ? ? }
? ? },
? ? // 是否使用css分離插件 ExtractTextPlugin
? ? extract: {
? ? ? filename: `static/css/[name].${timeUpdate}.css`,
? ? ? chunkFilename: `static/css/[name].${timeUpdate}.css`
? ? }
? },
? // webpack-chain (鏈?zhǔn)讲僮?這個(gè)庫提供了一個(gè) webpack 原始配置的上層抽象，
? // 使其可以定義具名的 loader 規(guī)則和具名插件，并有機(jī)會(huì)在后期進(jìn)入這些規(guī)則并對它們的選項(xiàng)進(jìn)行修改。
? // 它允許我們更細(xì)的控制其內(nèi)部配置。
? chainWebpack(config) {
?? ??? ?// img的文件名修改
?? ? ? ?config.module
?? ? ? ? ?.rule('images')
?? ? ? ? ?.use('url-loader')
?? ? ? ? ?.tap(options => {
?? ? ? ? ? ?options.name = `static/img/[name].${timeUpdate}.[ext]`
?? ? ? ? ? ?options.fallback = {
?? ? ? ? ? ? ?loader: 'file-loader',
?? ? ? ? ? ? ?options: {
?? ? ? ? ? ? ? ?name: `static/img/[name].${timeUpdate}.[ext]`
?? ? ? ? ? ? ?}
?? ? ? ? ? ?}
?? ? ? ? ? ?return options
?? ? ? ? ?})
?? ?},
};

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: