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. 将这个地址输入到浏览器中，然后我们再随便修改代码，页面就会自动刷新。