vite 構建工具 如何熱更新靜態頁面？自動重新整理頁面

前端周哥發表於2022-01-15
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 協議》，轉載必須註明作者和本文連結

相關文章