前端vue项目部署中,用户还在访问系统,存在缓存问题,部署后需要ctrlF5强制刷新,解决热更新的几种方案
问题描述:
问题是这样的,在部署的时候,用户并没有关闭浏览器还保持访问操风系统管理项目的页面中。这样才会产生问题缓存;如果在部署的时候或者部署之前,用户并没有打开系统页面,部署完成后,才访问操风系统,不会存在缓存的。我刚才测试了一下。要想解决,部署之前或在部署中,用户还再使用的情况下,前端得写定时获取版本号,如果本地的版本号小于服务端的版本号,自动给他强制更新一下。
1.纯前端解决:需要每次打包之前,手动更改版本号,每次切换页面路由会调用版本号对比
https://blog.csdn.net/qq_34701838/article/details/124959358
(Vue-cli代码控制)
1.在public静态目录下新建version.json每次发版更改里面的版本号
{
"version": "0.0.1"
}
2.在src中新建 libs/versionUpdate.js文件
import axios from 'axios'
const isNewVersion = () => {
let url = `//${window.location.host}/version.json?t=${new Date().getTime()}`
axios.get(url).then(res => {
if (res.status === 200) {
let vueVersion = res.data.version || '1.0.0'
let localVueVersion = localStorage.getItem('vueVersion')
localStorage.setItem('vueVersion', vueVersion)
if (localVueVersion && localVueVersion != vueVersion) {
alert('检测到新版本,请点击确认刷新页面哦')
window.location.reload(true)
return
}
}
})
}
export default {
isNewVersion
}
3.在全局路由拦截中写,只要每次版本号不同就重新加载页面配合第一步就可以清楚浏览器缓存
import versionTood from '@/libs/versionUpdate'
router.beforeEach(( to, from, next ) => {
//判断当前代码版本是否与服务器中代码版本一致,如不一致则刷新页面获取最新
versionTood.isNewVersion();
}
4.配置打包自动化自增版本号,不许手动修改文件
新建文件 addVersion.js
//npm run build打包前执行此段代码 let fs = require('fs'); let urlVersionPir = "./public/version.json"; //返回package的json数据 function getVresionJson() { let data = fs.readFileSync(urlVersionPir);//fs读取文件 return JSON.parse(data);//转换为json对象 } function addVersion(pJson) { let version = "1.0.0"; if (!pJson) return version; // 将版本号切割成数组,计算出下一个版本号 let arr = pJson.split(".").map(e => { return parseInt(e) }); arr[arr.length - 1] += 1; for (let i = arr.length - 1; i > 0; i--) { if (arr[i] > 9) { arr[i] = 0; if ([i - 1] > -1) arr[i - 1] += 1; } } return arr.join("."); } let versionData= getVresionJson();//获取package的json let versionAddNumber = addVersion(versionData.version); versionData.version = versionAddNumber ; //用packageData覆盖package.json内容 fs.writeFile( urlVersionPir, JSON.stringify(versionAddNumber), (err) => { } );
修改package.js
"scripts": {
"build:prod": "node ./src/addVersion.js && vue-cli-service build"
}
终端打包:npm run build:prod
2.方案二,修改文件(自己尝试过了,不行)
https://www.cnblogs.com/songjuntao/p/16163337.html
前言
部署前端项目以后,你会发现一个问题(为什么必须刷新页面,页面才会更新到最新版本),其实就是因为服务器缓存的问题,接下来我就以我自己所用的方案来解决自动清除缓存的问题。
一、根目录index.html
在head标签中,加入下面的代码
<meta http-equiv="pragram" content="no-cache"><meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
- 1
- 2
二、配置vue.config.js
直接上代码【使用时间戳】
代码如下(示例):
const Version = new Date().getTime()
module.exports = {
css: {
loaderOptions: {
sass: {
data: `@import "@/components/themes/_handle.scss";`
}
},
// 是否使用css分离插件 ExtractTextPlugin
extract: {
// 修改打包后css文件名 // css打包文件,添加时间戳
filename: `static/css/[name].${Version}.css`, // 此处static/css/xxx 目录根据自己打包情况来定,我使用的就没有static一层,所以直接去掉static即可。根据自己项目决定
chunkFilename: `static/css/[name].${Version}.css`
}
},
configureWebpack: {
output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
// filename: utils.assetsPath('js/[name].[chunkhash].'+Version+'js'),
// chunkFilename: utils.assetsPath('js/[id].[chunkhash].'+Version+'js')
filename: `static/js/[name].${Version}.js`, // js打包文件,添加时间戳
chunkFilename: `static/js/[name].${Version}.js`
}
},
chainWebpack(config) {
// img的文件名修改 // img打包文件,添加时间戳
config.module
.rule('images')
.use('url-loader')
.tap(options => {
options.name = `static/img/[name].${Version}.[ext]`
options.fallback = {
loader: 'file-loader',
options: {
name: `static/img/[name].${Version}.[ext]`
}
}
return options
})
}
}
3. 修改nginx服务器:
- 前端不缓存html,防止程序更新后缓存继续生效
location / {
# 不缓存html,防止程序更新后缓存继续生效
if ($request_filename ~* .*\.(?:htm|html)$) {
add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
access_log on;
}
}
Linux服务器设置nginx禁用html缓存)
只配置了不缓存html和htm,js,css等文件没有做处理,是因为我们前端编译发布代码时,如果某个js或css有更新,会自动在文件名上加时间戳、哈希值,这样一发新版时,只要客户端请求了新版的html,就会自动找到新的js、css,没有更新的js、css还会继续用缓存,这样既不会太大的影响网页的访问速度,也能保证更新的代码不走缓存。
禁止index.html
server {
listen 80;
server_name test.exmaple.cn;
location / {
if ($request_filename ~* .*\.(?:htm|html)$) ## 配置页面不缓存html和htm结尾的文件
{
add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
}
root /web/;
index index.html;
try_files $uri $uri/ /index.html =404;
}
}
暴力禁止所有静态资源缓存
location ~.*\.(js|css|html|png|jpg)$
{
add_header Cache-Control no-cache;
}