vite 构建工具 如何热更新静态页面？自动刷新页面

介绍：
最近有一些粉丝用guiplan只做静态页面，但每次修改文件都要手动刷新页面，而且页面内容越来越多的时候，每次刷新页面还需要拖动滚动条才能看到效果。而用element-ui框架与uniapp框架都有对应的构建工具能实现热更新，比如webpack,uniapp。这一章将教大家如何通过vite实现静态页面的热更新。也就是修改代码自动刷新页面。

步骤

1. 先输入命令来安装vite项目：

npm init vite

安装过程直接按enter键继续即可，不用选框架如下图：

2. 双击打开vite-project文件夹,然后将里面的package.json复制出来

3.然后粘贴到自己的静态网页文件夹中

4. 有了这个package.json之后我们就可以执行安装命令

npm install
安装完之后就有了node_modules文件夹

5. 创建vite配置文件，文件名称必须为vite.config.js 代码如下

import { defineConfig } from 'vite'

export default defineConfig({
server: {

open: 'index.html'

}
})
vite构建工具会自动寻找vite.config.js文件，然后执行里面的代码。以上代码就是打开index.html静态页面。

注意：这里如果用其他的html文件，比如test.html 应该这样写/test.html而不是./test.html只能用绝对路径来定位文件

6. 启动服务打开页面

npm run dev

7. 将这个地址输入到浏览器中，然后我们再随便修改代码，页面就会自动刷新。
   ————————————————
   版权声明：本文为CSDN博主「web前端神器」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
   原文链接：https://blog.csdn.net/guige88...