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

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

步骤

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

npm init vite

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

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

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

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

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

  1. 创建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只能用绝对路径来定位文件

  1. 启动服务打开页面

npm run dev

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

你可能感兴趣的