%20(2).svg)
项目简介
本项目是基于Vite插件机制开发的页面自动刷新系统，主要解决前端项目部署后因浏览器缓存，导致用户无法及时看到最新版本的问题。通过该插件，前端页面可自动刷新，确保用户访问到最新内容。
项目的主要特性和功能
- 自动刷新：在Vite构建过程中运行，自动检测页面变化并刷新。
- 避免缓存：保证用户访问的是最新页面，而非缓存版本。
- 灵活配置：可通过
refreshPlugin函数配置，指定打包路径和存储在localStorage中的缓存名称。
安装使用步骤
1. 安装插件
通过npm或yarn安装vite-plugin-page-refresh插件。
bash
npm i vite-plugin-page-refresh
yarn add vite-plugin-page-refresh
2. 在Vite配置中使用插件
在vite.config.ts（或.js）文件中，引入并使用refreshPlugin。
```javascript
import refreshPlugin from 'vite-plugin-page-refresh'
import path from 'path' // 确保已导入path模块
export default defineConfig({ plugins: [ // 使用refreshPlugin，将当前项目的dist目录作为打包路径 refreshPlugin(path.resolve(process.cwd(), 'dist')) ] }) ```
3. 构建和运行项目
运行Vite构建命令（如vite build），插件将在构建过程中自动运行，实现页面刷新功能。
注意事项
- 请确保项目已正确配置Vite，且已成功构建过一次。
- 此插件主要用于部署后的页面刷新，本地开发热更新可能无法正常工作，如有需要，请结合其他热更新工具使用。
- 此项目基于Vite和JavaScript开发，要求运行环境支持这些技术栈。
- 使用前请确保浏览器支持HTML5及相关的Web技术。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】