Vue如何解決每次發(fā)版都要強刷清除瀏覽器緩存問題

更新時間：2022年08月11日 10:17:39 作者：曉狐貍

這篇文章主要介紹了Vue如何解決每次發(fā)版都要強刷清除瀏覽器緩存問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

每次發(fā)版都要強刷清除瀏覽器緩存問題

原理

將打包后的js和css文件，加上打包時的時間戳

1.index.html

在 public 目錄下的index.html文件里添加如下代碼：

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

2.vue.config.js

在vue.config.js中，配置相關打包配置，代碼如下：

let timeStamp = new Date().getTime();
module.exports = {
? ? publicPath: "./",
? ? filenameHashing: false,
? ? // 打包配置
? ? configureWebpack: {
? ? ? ? output: { // 輸出重構 打包編譯后的js文件名稱,添加時間戳.
? ? ? ? ? ? filename: `js/js[name].${timeStamp}.js`,
? ? ? ? ? ? chunkFilename: `js/chunk.[id].${timeStamp}.js`,
? ? ? ? }
? ? },
? ? css: {
? ? ? ? extract: { // 打包后css文件名稱添加時間戳
? ? ? ? ? ? filename: `css/[name].${timeStamp}.css`,
? ? ? ? ? ? chunkFilename: `css/chunk.[id].${timeStamp}.css`,
? ? ? ? }
? ? }
};

filename指列在entry 中，打包后輸出的文件的名稱。
chunkFilename指未列在entry 中，卻又需要被打包出來的文件的名稱。

vue 強制清除瀏覽器緩存

（1）最基本的方法就是

在打包的時候給每個打包文件加上hash 值，一般是在文件后面加上時間戳

//在vue.config.js 文件中，找到output：
const Timestamp = new Date().getTime()
output: { // 輸出重構 ?打包編譯后的 文件名稱 ?【模塊名稱.版本號.時間戳】
? ? ? filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
? ? ? chunkFilename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
?
? ? }

（2）在html文件中加入meta標簽

（不推薦此方法）

<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

（3）需要后端陪著,進行nginx配置　

location = /index.html {
? ? add_header Cache-Control "no-cache, no-store";
}

原因：第二種方法瀏覽器也會出現緩存，配置之后禁止html 出現緩存

no-cache, no-store可以只設置一個

no-cache瀏覽器會緩存，但刷新頁面或者重新打開時會請求服務器，服務器可以響應304，如果文件有改動就會響應200
no-store瀏覽器不緩存，刷新頁面需要重新下載頁面

（4）在腳本加載時加入一個時間戳

修改 webpack.prod.conf.js 文件。（未使用過該方法，需要實踐）

const version = new Date().getTime();
new HtmlWebpackPlugin({
? ? filename: config.build.index,
? ? template: 'index.html',
? ? inject: true,
? ? hash: version,
? ? favicon: resolve('icon.ico'),
? ? title: 'vue-admin-template',
? ? minify: {
? ? ? ? removeComments: true,
? ? ? ? collapseWhitespace: true,
? ? ? ? removeAttributeQuotes: true
? ? }
})

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: