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

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

步骤

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

npm init vite

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

安装过程直接按enter键继续即可,不用选框架如下图:
vite 构建工具 如何热更新静态页面?自动刷新页面

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

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

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

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

  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

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

  1. 将这个地址输入到浏览器中,然后我们再随便修改代码,页面就会自动刷新。
    ————————————————
    版权声明:本文为CSDN博主「web前端神器」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:blog.csdn.net/guige8888811/article...
本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!