這篇具有很好參考價值的文章主要介紹了【前端】Vue 部署上線清除瀏覽器緩存的方式。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。
【前端】Vue 部署上線清除瀏覽器緩存的方式
修改根目錄index.html
在 head 里面添加下面代碼
| 1 2 |
<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
|
?
配置 nginx 不緩存 html
vue默認(rèn)配置，打包后css和js的名字后面都加了哈希值，不會有緩存問題。但是index.html在服務(wù)器端可能是有緩存的，需要在服務(wù)器配置不讓緩存index.html
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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)不緩存
????}?
??}
}文章來源地址http://www.zghlxwxcb.cn/news/detail-492214.html
|
-
no-cache瀏覽器會緩存，但刷新頁面或者重新打開時 會請求服務(wù)器，服務(wù)器可以響應(yīng)304，如果文件有改動就會響應(yīng)200
-
no-store瀏覽器不緩存，刷新頁面需要重新下載頁面
打包的文件路徑添加時間戳
1、在 vue-cli2.x 創(chuàng)建的項目里，找到 build/webpack.prod.conf.js 文件
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//定義一個變量獲取當(dāng)前時間戳
const version = new Date().getTime();
//output模塊將時間戳加入到輸出的文件名里
output: {
??publicPath: '/',
??path: config.build.assetsRoot,
??filename: utils.assetsPath(`js/[name].[chunkhash].${version}.js`),
??chunkFilename: utils.assetsPath(`js/[id].[chunkhash].${version}.js`)
},
//css文件名加時間戳
new ExtractTextPlugin({
????filename: utils.assetsPath(`css/[name].[contenthash].${version}.css`),
????allChunks: true,
}),
|
2、在 vue-cli3.x 創(chuàng)建的項目里，打開 vue.config.js 文件 ( 沒有該文件自己在 src 同級目錄下創(chuàng)建一個 )
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
const version = new Date().getTime();
module.exports = {
????outputDir: 'dist', //打包的時候生成的一個文件名
????lintOnSave: false,
????productionSourceMap: false,
????css: {
????????loaderOptions: {
??????????sass: {
????????????data: `@import "@/components/themes/_handle.scss";`
??????????}
????????},
????????// 是否使用css分離插件 ExtractTextPlugin
????????extract: {
??????????// 修改打包后css文件名?? // css打包文件，添加時間戳
??????????filename: `css/[name].${version}.css`,??
??????????chunkFilename: `css/[name].${version}.css`
????????}
?????},
????configureWebpack: {
????????output: { // 輸出重構(gòu)? 打包編譯后的 文件名稱? 【模塊名稱.版本號.時間戳】
?????????????filename: `js/[name].[chunkhash].${version}.js`,
?????????????chunkFilename: `js/[id].[chunkhash].${version}.js`
????????}
????}文章來源：http://www.zghlxwxcb.cn/news/detail-492214.html
}
|
到了這里，關(guān)于【前端】Vue 部署上線清除瀏覽器緩存的方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進(jìn)行投訴反饋，一經(jīng)查實，立即刪除！
