介绍:最近有爱好者使用guiplan只做静态页面,但是每次修改文件都要手动刷新页面,而且当页面内容增加的时候需要滚动条每次刷新页面都要拖动看效果。element-ui框架和uniapp框架都有相应的构建工具来实现热更新,比如webpack和uniapp。本章将教大家如何通过vite实现静态页面的热更新。也就是修改代码让页面自动刷新。步骤:首先输入安装vite项目的命令:npminitvite安装过程,直接回车即可,不需要选择framework如下图:双击打开vite-project文件夹,然后复制里面的package.json3.然后粘贴到我们的staticweb文件夹中有了这个package.json之后,我们就可以执行安装命令npminstall了。安装后会有一个node_modules文件夹,用来创建vite的配置文件。文件名必须是vite.config.js。代码如下import{defineConfig}from'vite'exportdefaultdefineConfig({server:{open:'index.html'}})vite构建工具会自动找到vite.config.js文件并执行里面的代码.上面的代码是打开index.html静态页面。注意:如果这里使用其他的html文件,比如test.html,应该写成/test.html,而不是./test.html。您只能使用绝对路径来定位文件。启动服务打开页面npmrundev在浏览器中输入这个地址,然后我们随便修改一下代码,页面就会自动刷新。————————————————版权声明:本文为CSDN博主“web前端神器”原创文章,遵循CC4.0BY-SA版权协议,转载请附上原文源链接和此声明。
