vite-plugin-html-version
v0.0.7
Published
解决浏览器缓存问题。给html文件添加版本号，并生成version.txt文件。
Downloads
108
Readme
vite-plugin-html-version
A vite plugin to add version to html.
解决新版本发布后，用户浏览器缓存html导致页面不更新的问题。
Install
npm i vite-plugin-html-version -DUsage
// vite.config.js
import { defineConfig } from 'vite'
import htmlVersion from 'vite-plugin-html-version'
export default defineConfig({
plugins: [
htmlVersion({
version: '1.0.0',
}),
],
})Result
<!DOCTYPE html>
<html data-version="1667206656289" lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="module" src="/src/index.a3s5rdf2f3.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>Options
| Name | Type | Default | Description |
| ----------- | ------------------- | ------------------- | ------------------------------ |
| version | string |Date.now().toString()| version |
| path | string | ./ | 存储版本信息的文件夹路径 |
| filename | string | version.txt | 存储版本信息的文件名 |
| fileContent | string | (version) => string | version| 存储版本信息的文件内容 |
| attr | string | data-version | attribute to add version |
Demo
// vite.config.js
import { defineConfig } from 'vite'
import htmlVersion from 'vite-plugin-html-version'
export default defineConfig({
plugins: [
htmlVersion(),
],
})- 通过
data-version属性，可以在页面中获取当前版本号。 - 通过 fetch(
/version.txt?_t=${Date.now}) 获取最新版本号。 - 对比版本号，如果版本号不一致，即有新版本发布，刷新页面。
// 比较版本号
async function diffVersion() {
const newVersion = await getVersion();
const oldVersion = document.documentElement?.dataset?.version?.trim();
// 有新版本
if (newVersion !== oldVersion) return reload("检测到新版本，即将刷新页面");
}
// 获取最新版本号
function getVersion() {
return fetch(`/version.txt?_t=${Date.now()}`).then((res) => {
if (res.ok) {
return res.body
?.getReader()
.read()
.then(({ value }) => {
return new TextDecoder().decode(value);
});
} else {
throw new Error("获取版本号失败");
}
});
}自定义版本文件内容
// vite.config.js
import { defineConfig } from 'vite'
import htmlVersion from 'vite-plugin-html-version'
export default defineConfig({
plugins: [
htmlVersion({
version: '1.0.0',
path: './config', // 存储版本信息的文件夹路径，相对于部署后的根目录
filename: 'version.json',
fileContent: (version) => `{
version: ${version},
time: ${Date.now()},
env: 'test',
forceUpdate: true
}`,
}),
],
})// 比较版本号
async function diffVersion() {
const newVersion = await getVersion();
const oldVersion = document.documentElement?.dataset?.version?.trim();
// 有新版本
if (newVersion !== oldVersion) return reload("检测到新版本，即将刷新页面");
}
// 获取最新版本号
function getVersion() {
return fetch(`/config/version.json?_t=${Date.now()}`).then((res) => {
if (res.ok) {
return res.json().then((json) => {
const oldVersion = document.documentElement?.dataset?.version?.trim();
const newVersion = json.version;
// 有新版本
if (newVersion !== oldVersion) {
// 强制更新
if (json.forceUpdate) {
return reload("检测到新版本，即将刷新页面");
}
// 非强制更新
return newVersion;
}
});
} else {
throw new Error("获取版本号失败");
}
});
}