Vue入口文件index.html緩存問題如何解決

這篇文章主要介紹“Vue入口文件index.html緩存問題如何解決”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue入口文件index.html緩存問題如何解決”文章能幫助大家解決問題。

Vue入口文件index.html緩存

之前每次發版vue后臺管理系統的時候，總是要強制刷瀏覽器才能生效，現在總算解決這個問題了。

vue-cli里的默認配置，css和js的名字都加了哈希值，所以新版本css、js和就舊版本的名字是不同的，不會有緩存問題。

但是把打包好的index.html放到服務器里去的時候，index.html在服務器端可能是有緩存的，這需要在服務器配置不讓緩存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項目index.html引入靜態資源，刷新頁面

<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>

項目中引入這兩個cdn。但是這兩個cdn 都掛完了，后來改成了本地引用。

在 pubilc 文件夾下 創建了static存放靜態文件，在index.html里面引用。

<script src="./static/jsencrypt.min.js"></script>
<script src="./static/proxy.min.js"></script>

此時vue-router的路由模式(mode) 是 history模式。

上圖是剛進頁面的時候請求靜態文件，靜態文件的指向是正確的。

上面是在當前頁面刷新一下出現的問題，提示引入的靜態資源找不到。 一開始以為是要讓后端在nginx里面添加配置。后來想想如果沒配置的話 頁面應該是404的。

現在問題定位知道了是 路徑引用的問題并且是前端的原因。

查看了 vue-cli文檔

并且在index.html里面看到了圖標的引用，刷新的時候圖標沒有找不到。

<link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >

所以那兩個js的引用改為（試一試）

<script src="<%= BASE_URL %>static/jsencrypt.min.js"></script><script src="<%= BASE_URL %>static/proxy.min.js"></script>

打包之后發布線上

本地效果（刷新之后依舊正確）

<%= BASE_URL %> 插值 當前域名引用

關于“Vue入口文件index.html緩存問題如何解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。