vue 部署上線清除瀏覽器緩存的方式
部署上線清除瀏覽器緩存
vue 項目打包上線之後,每一次都會有瀏覽器緩存問題,需要手動的清除緩存。這樣用戶體驗非常不好,所以我們在打包部署的時候需要盡量避免瀏覽器的緩存。
下面是我的解決方案:
修改根目錄index.html
在 head 裡面添加下面代碼
<meta http-equiv="pragram" content="no-cache"> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
這種會讓所有的css/js資源重新加載
配置 nginx 不緩存 html
vue默認配置,打包後css和js的名字後面都加瞭哈希值,不會有緩存問題。但是index.html在服務器端可能是有緩存的,需要在服務器配置不讓緩存index.html
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文件設置永遠不緩存 } } }
no-cache
瀏覽器會緩存,但刷新頁面或者重新打開時 會請求服務器,服務器可以響應304,如果文件有改動就會響應200no-store
瀏覽器不緩存,刷新頁面需要重新下載頁面
打包的文件路徑添加時間戳
1、在 vue-cli2.x 創建的項目裡,找到 build/webpack.prod.conf.js 文件
//定義一個變量獲取當前時間戳 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 創建的項目裡,打開 vue.config.js 文件 ( 沒有該文件自己在 src 同級目錄下創建一個 )
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: { // 輸出重構 打包編譯後的 文件名稱 【模塊名稱.版本號.時間戳】 filename: `js/[name].[chunkhash].${version}.js`, chunkFilename: `js/[id].[chunkhash].${version}.js` } } }
效果:
vue項目部署,清理緩存方式
1.index.html
<!--清除瀏覽器中的緩存 --> <meta http-equiv="pragram" content="no-cache"> <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
2.vue.config.js
const timeUpdate = new Date().getTime(); module.exports = { // 解決發佈生產以後有緩存的問題 // 輸出重構 打包編譯後的 文件名稱 【模塊名稱.版本號.時間戳】 //一般情況下,該方法就能解決。 configureWebpack: { output: { filename: `[name].js?v=${timeUpdate}`, chunkFilename: `[name].js?v=${timeUpdate}` }, }, // 修改打包後css文件名 css: { loaderOptions: { sass: { data: `@import "@/components/themes/_handle.scss";` } }, // 是否使用css分離插件 ExtractTextPlugin extract: { filename: `static/css/[name].${timeUpdate}.css`, chunkFilename: `static/css/[name].${timeUpdate}.css` } }, // webpack-chain (鏈式操作)這個庫提供瞭一個 webpack 原始配置的上層抽象, // 使其可以定義具名的 loader 規則和具名插件,並有機會在後期進入這些規則並對它們的選項進行修改。 // 它允許我們更細的控制其內部配置。 chainWebpack(config) { // img的文件名修改 config.module .rule('images') .use('url-loader') .tap(options => { options.name = `static/img/[name].${timeUpdate}.[ext]` options.fallback = { loader: 'file-loader', options: { name: `static/img/[name].${timeUpdate}.[ext]` } } return options }) }, };
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- Vue如何解決每次發版都要強刷清除瀏覽器緩存問題
- vue項目中禁用瀏覽器緩存配置案例
- vue修改打包配置如何實現代碼打包後的自定義命名
- webpack打包時如何修改文件名的實現示例
- NodeJs使用webpack打包項目的方法詳解