介绍:
最近有一些粉丝用 guiplan 只做动态页面,但每次批改文件都要手动刷新页面,而且页面内容越来越多的时候,每次刷新页面还须要拖动滚动条能力看到成果。而用 element-ui 框架与 uniapp 框架都有对应的构建工具能实现热更新,比方 webpack,uniapp。这一章将教大家如何通过 vite 实现动态页面的热更新。也就是批改代码主动刷新页面。
步骤
- 先输出命令来装置 vite 我的项目:
npm init vite
装置过程间接按 enter 键持续即可,不必选框架如下图:
- 双击关上 vite-project 文件夹, 而后将外面的 package.json 复制进去
3. 而后粘贴到本人的动态网页文件夹中
- 有了这个 package.json 之后咱们就能够执行装置命令
npm install
装置完之后就有了 node_modules 文件夹
- 创立 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 只能用绝对路径来定位文件
- 启动服务关上页面
npm run dev
- 将这个地址输出到浏览器中,而后咱们再轻易批改代码,页面就会主动刷新。
————————————————
版权申明:本文为 CSDN 博主「web 前端神器」的原创文章,遵循 CC 4.0 BY-SA 版权协定,转载请附上原文出处链接及本申明。
原文链接:https://blog.csdn.net/guige88…