Vue入口文件index.html緩存的問(wèn)題及解決
Vue入口文件index.html緩存
之前每次發(fā)版vue后臺(tái)管理系統(tǒng)的時(shí)候，總是要強(qiáng)制刷瀏覽器才能生效，現(xiàn)在總算解決這個(gè)問(wèn)題了。
vue-cli里的默認(rèn)配置，css和js的名字都加了哈希值，所以新版本css、js和就舊版本的名字是不同的，不會(huì)有緩存問(wèn)題。
但是把打包好的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)資源，刷新頁(yè)面
<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 都掛完了，后來(lái)改成了本地引用。
在 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)頁(yè)面的時(shí)候請(qǐng)求靜態(tài)文件，靜態(tài)文件的指向是正確的。
上面是在當(dāng)前頁(yè)面刷新一下出現(xiàn)的問(wèn)題，提示引入的靜態(tài)資源找不到。 一開(kāi)始以為是要讓后端在nginx里面添加配置。后來(lái)想想如果沒(méi)配置的話 頁(yè)面應(yīng)該是404的。
現(xiàn)在問(wèn)題定位知道了是 路徑引用的問(wèn)題并且是前端的原因。
查看了 vue-cli文檔
并且在index.html里面看到了圖標(biāo)的引用，刷新的時(shí)候圖標(biāo)沒(méi)有找不到。
<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)文章
vue中的@click.native 原生點(diǎn)擊事件
這篇文章主要介紹了vue中的@click.native 原生點(diǎn)擊事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)易記事本，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue?實(shí)現(xiàn)動(dòng)態(tài)設(shè)置元素的高度
這篇文章主要介紹了在vue中實(shí)現(xiàn)動(dòng)態(tài)設(shè)置元素的高度，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue如何使用el-table遍歷循環(huán)表頭和表體數(shù)據(jù)
這篇文章主要介紹了vue如何使用el-table遍歷循環(huán)表頭和表體數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue2+ElementUI表單、Form組件的封裝過(guò)程
在 Vue2 項(xiàng)目中,ElementUI 的 el-form 組件是常用的表單組件,它提供了豐富的功能和樣式,可以滿(mǎn)足各種需求,本文給大家介紹Vue2+ElementUI表單、Form組件的封裝過(guò)程,感興趣的朋友跟隨小編一起看看吧2024-03-03
虛擬dom是當(dāng)前前端最流行的兩個(gè)框架（vue和react）都用到的一種技術(shù),都說(shuō)他能幫助vue和react提升渲染性能,提升用戶(hù)體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于Vue3組件更新中的DOM?diff算法的相關(guān)資料,需要的朋友可以參考下2022-04-04
element-ui中select下拉框加載大數(shù)據(jù)渲染優(yōu)化方式
這篇文章主要介紹了element-ui中select下拉框加載大數(shù)據(jù)渲染優(yōu)化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue3+NodeJS+Soket.io實(shí)現(xiàn)實(shí)時(shí)聊天的示例代碼
本文主要介紹了Vue3+NodeJS+Soket.io實(shí)現(xiàn)實(shí)時(shí)聊天的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
在Vue.js開(kāi)發(fā)中,我們經(jīng)常需要?jiǎng)?chuàng)建可復(fù)用的組件,這些組件可能會(huì)有自己的樣式規(guī)則,而有時(shí)我們希望父組件能夠影響子組件的樣式,本文將詳細(xì)介紹如何使用v-deep以及一些相關(guān)的最佳實(shí)踐,需要的朋友可以參考下2024-10-10
vue在路由中驗(yàn)證token是否存在的簡(jiǎn)單實(shí)現(xiàn)
今天小編就為大家分享一篇vue在路由中驗(yàn)證token是否存在的簡(jiǎn)單實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11