乐趣区

关于前端: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…
退出移动版