Vue项目部署后提示刷新版本

最新推荐文章于 2024-04-22 10:13:30 发布

原创

最新推荐文章于 2024-04-22 10:13:30 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #webpack

当Vue项目部署新版本后，为了确保用户能够加载最新内容，通常需要提示用户刷新页面。本文探讨如何在不依赖后端接口的情况下，通过前端方式检查版本更新，并在有新版本时显示刷新提示。提及的解决方案包括在webpack配置中处理入口文件，以及使用vue-cli创建的项目的配置调整。

废话只说一句：码字不易求个👍，收藏 === 学会,快行动起来吧！🙇‍🙇‍🙇‍。

vue项目部署新版本后，用户如果不刷新页面，可能会出现一些异常，需要刷新后才能正常使用，所以希望每次部署新版本后，提示用户刷新浏览器。

之前看vue文档，发现类似的功能。

查了好些资料，网上说的大部分也都是通过接口调用获取版本号与本地版本号进行对比，然而我只想用纯前端的方式，那该怎么做呢，实在不行就只能查资料自己开发个 webpack 插件进行处理了。

在 vuecli5 中 webpack 入口文件配置层级为 compiler.options.entry.app.import = [] 所以在合并入口文件数据的时候按照以下形式处理。

// 自动注入到 webpack.entry
compiler.options.entry.app.import = [...compiler.options.entry.app.import,...['./src/libs/version.js']
];

versionWebpackPlugin 主要代码：

/***
 * title: versionWebpackPlugin.js
 * Author: Gaby
 * Email: 
 * Time: 2022-06-27 14:24
 * LastEditTime: 2022-06-27 14:24
 * LastEditors: Gaby
 * Description:
 */

const fs = require('fs');
const path = require('path');
const config = require('../package.json');
const readFile = filePath => fs.readFileSy

最低0.47元/天解锁文章