Vue入口文件index.html緩存的問題及解決
Vue入口文件index.html緩存
之前每次發(fā)版vue后臺(tái)管理系統(tǒng)的時(shí)候，總是要強(qiáng)制刷瀏覽器才能生效，現(xiàn)在總算解決這個(gè)問題了。
vue-cli里的默認(rèn)配置，css和js的名字都加了哈希值，所以新版本css、js和就舊版本的名字是不同的，不會(huì)有緩存問題。
但是把打包好的index.html放到服務(wù)器里去的時(shí)候，index.html在服務(wù)器端可能是有緩存的，這需要在服務(wù)器配置不讓緩存index.html
解決方法如下：
前端在index.html中添加：
? ? <meta http-equiv="Expires" content="0"> ?? ?<meta http-equiv="Pragma" content="no-cache"> ?? ?<meta http-equiv="Cache-control" content="no-cache"> ?? ?<meta http-equiv="Cache" content="no-cache">? ??
nginx 配置如下：
location = /index.html {
? ? add_header Cache-Control "no-cache, no-store";
}Vue項(xiàng)目index.html引入靜態(tài)資源，刷新頁面
<script src="https://cdn.jsdelivr.net/npm/jsencrypt@3.2.1/bin/jsencrypt.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>
項(xiàng)目中引入這兩個(gè)cdn。但是這兩個(gè)cdn 都掛完了，后來改成了本地引用。
在 pubilc 文件夾下 創(chuàng)建了static存放靜態(tài)文件，在index.html里面引用。
<script src="./static/jsencrypt.min.js"></script> <script src="./static/proxy.min.js"></script>
此時(shí)vue-router的路由模式(mode) 是 history模式。
上圖是剛進(jìn)頁面的時(shí)候請(qǐng)求靜態(tài)文件，靜態(tài)文件的指向是正確的。
上面是在當(dāng)前頁面刷新一下出現(xiàn)的問題，提示引入的靜態(tài)資源找不到。 一開始以為是要讓后端在nginx里面添加配置。后來想想如果沒配置的話 頁面應(yīng)該是404的。
現(xiàn)在問題定位知道了是 路徑引用的問題并且是前端的原因。
查看了 vue-cli文檔
并且在index.html里面看到了圖標(biāo)的引用，刷新的時(shí)候圖標(biāo)沒有找不到。
<link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
所以那兩個(gè)js的引用改為（試一試）
<script src="<%= BASE_URL %>static/jsencrypt.min.js"></script><script src="<%= BASE_URL %>static/proxy.min.js"></script>
打包之后發(fā)布線上
本地效果（刷新之后依舊正確）
<%= BASE_URL %> 插值 當(dāng)前域名引用
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決ant-design-vue中menu菜單無法默認(rèn)展開的問題
這篇文章主要介紹了解決ant-design-vue中menu菜單無法默認(rèn)展開的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了this在vue和小程序中的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
這篇文章主要介紹了Vue中的table表單切換實(shí)現(xiàn)效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue?使用postMessage?實(shí)現(xiàn)父子跨域通信
這篇文章主要介紹了Vue應(yīng)用?postMessage?實(shí)現(xiàn)父子跨域通信,通過示例介紹了postMessage的使用，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-12-12
當(dāng)針對(duì)不同客戶需要提供不同的圖標(biāo)時(shí),頁面其他圖標(biāo)好替換,但是網(wǎng)頁圖標(biāo)就不太一樣了,下面這篇文章主要給大家介紹了關(guān)于vue中修改瀏覽器圖標(biāo)和名字的幾種方式,需要的朋友可以參考下2022-10-10
vue實(shí)現(xiàn)el-table點(diǎn)選和鼠標(biāo)框選功能的方法
在Vue中我們經(jīng)常需要處理表格數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)el-table點(diǎn)選和鼠標(biāo)框選功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
Vue 3 作為前端開發(fā)中一個(gè)非常流行的框架,在錯(cuò)誤處理方面提供了靈活和強(qiáng)大的能力,本文將深入介紹在 Vue 3 中如何捕獲和處理錯(cuò)誤,包括組件級(jí)的錯(cuò)誤處理、全局錯(cuò)誤處理以及如何與異常日志系統(tǒng)集成,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue3 vite配置跨域以及不生效問題,本文給大家分享完美解決方案，需要的朋友可以參考下2023-07-07
Vue?Router解決多路由復(fù)用同一組件頁面不刷新問題(場(chǎng)景分析)
這篇文章主要介紹了Vue?Router解決多路由復(fù)用同一組件頁面不刷新問題,多路由復(fù)用同一組件的場(chǎng)景分析，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
下面小編就為大家分享一篇基于vue打包后字體和圖片資源失效問題的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03