VUE项目版本迭代自动更新当前版本的代码 更新 刷新 自动更新静态文件 reload

186 篇文章 4 订阅
91 篇文章 4 订阅

window.reload是重新加载当前网站的内容;

解决思路:

在配置文件写一个版本号,存入缓存,如果版本号低就调用 location.reload() 自动刷新页面

app.vue 示例代码:

onLaunch: function(e) {
			console.log('App Launch', e, this.$config);
			let config = this.$config
			
			console.log('config.v_num', config.v_num);

			if (uni.getStorageSync('v_num')) {
				console.log("uni.getStorageSync('v_num')",uni.getStorageSync('v_num'));
				if (config.v_num > uni.getStorageSync('v_num')) {
					uni.setStorageSync('token', '')
					uni.setStorageSync('v_num', config.v_num)
					location.reload();
				}
			} else {
				uni.setStorageSync('token', '')
				uni.setStorageSync('v_num', config.v_num)
				location.reload();
			}
}

配置文件 config.js 代码:


var config = {
	v_num:29,//版本号,每次更新代码+1
}

export default config;

在mian.js 静态文件中导入:


Vue.prototype.$config = config;

ok, 这样每次迭代前端代码就会自动更新代码了

  • 2
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
Vue3和Vite中实现版本更新自动刷新的方法下: 1. 配置Vite插件:在vite.config.js文件中,可以使用versionUpdatePlugin插件来实现版本更新自动刷新。该插件可以在每次打包生产代码时,在public目录下生成一个version.json版本信息文件,并将版本号定义为全局变量__APP_VERSION__。同时,该插件还可以监控版本迭代更新,并在页面跳转时,通过请求服务器端的version.json文件和浏览器本地缓存的版本号进行对比,从而实现页面自动更新。 ```javascript // vite.config.js import { defineConfig } from 'vite' import versionUpdatePlugin from './versionUpdatePlugin' export default defineConfig((config) => { const now = new Date().getTime() return { define: { __APP_VERSION__: now, // 定义全局变量__APP_VERSION__ }, plugins: [ // 使用versionUpdatePlugin插件 versionUpdatePlugin({ version: now, }), ], // 其他配置项... } }) ``` 2. 创建versionUpdatePlugin插件:在项目根目录下创建一个名为versionUpdatePlugin.js文件,并在该文件中定义versionUpdatePlugin插件。 ```javascript // versionUpdatePlugin.js export default function versionUpdatePlugin(options) { return { name: 'version-update-plugin', apply: 'build', generateBundle(_, bundle) { const version = options.version const versionInfo = { version: version, } const versionJson = JSON.stringify(versionInfo) // 在public目录下生成version.json文件 this.emitFile({ type: 'asset', fileName: 'version.json', source: versionJson, }) // 其他操作... }, } } ``` 通过以上配置,每次打包生产代码时,会在public目录下生成一个version.json文件,并将版本号定义为全局变量__APP_VERSION__。在页面跳转时,可以通过请求服务器端的version.json文件和浏览器本地缓存的版本号进行对比,从而实现页面自动更新
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

a_靖

对你有帮助吗?打赏鼓励一下?

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值