iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Modern Web

前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue系列 第 10

Day_10 : 讓 Vite 來開啟你的Vue 之 結構目錄

Hi Dai Gei Ho~ 我是Winnie~ 終於,我撐過中秋連假殞落的危險,走向 白洞,白色的明天,來到了文章的第十篇。

而在此篇的文章內容中,我們要來說說 Vite 的 目錄結構 與 執行模式

首先,大家可以照著以下指令給他yarn下去,如果之前有 yarn 過一個專案就不用再 yarn 了(誰沒young過XD)

 //yarn
 yarn create vite

擇一

  //npm
  npm init vite@latest

打開專案後,我們來先來看看 Vite 初始的目錄結構(以Vue為例):

├── README.md
├── index.html //放置於根目錄
├── node_modules
├── package.json
├── public
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   └── main.js 
├── vite.config.js
└── yarn.lock

從上方,我們可以看到Vite目錄結構相當簡潔,其中不同於vue-cliindex.html 放置在 public 中,而 vite 將 index.html 放置在根目錄中,這是為什麼呢?ˋ

針對這個疑問,在官方文件中是這樣解釋的,將index.html放在根目錄,這是Vite特意設計的,因為在開發期間 Vite 角色是一個 server,而index.html為 Vite的進入點(entry point),同時也把它視為 模組關係圖 的一部分。

而針對MPA多頁面的應用模式,在這邊 Vite 也支持 多個HTML 作為進入點,如何設定我們也會在接下的章節 Vite config 配置文章中做介紹。

如果我今天想改變進入點位置呢?

雖然Vite 在預設的進入位置為根目錄來啟動,但不用擔心,如果今天想更換路徑,也能透過 config 來進行配置,同樣地,要如何指定替代的根目錄我們也將會在下篇 Vite config 配置一併來做介紹

執行環境模式

接著我們再看看根目錄下的package.json,其中裡面的 scripts 中有三個腳本 分別如下:

  "scripts": {
   "dev": "vite",
   "build": "vite build",
   "serve": "vite preview"
 }

第一個 dev 模式相信大家不會太陌生,其指令主要是運用在專案開發時,我們在專案路徑下輸入指令 yarn dev or npm run dev就可以啟動 dev-server 。

而接下來兩個指令 yarn buildyarn serve 我們可以將其設為一組,主要會在部署網站 前依序執行這兩個指令。

首先,當我們 執行 yarn build時,Vite 進行程式碼的打包,而在預設情況下,打包後的檔案會放置在根目錄 中的dist資料夾中,同時每隻打包過的檔案前都會有自己獨立的hash。

略..
├── dist
│   ├── assets
│   │   ├── index.864e05cc.js
│   │   ├── index.f51547ab.css
│   │   └── vendor.84e3b79e.js
│   ├── favicon.ico
│   └── index.html
略..

接著當打包完成後,我們可以執行 yarn serve,而 vite preview 指令會在 本地啟用一個靜態Web server,將dist 中的文件 運行在預設的http://localhost:5000,這樣就可以在local環境下,預先檢查打包的內容是否可以正常使用了,以免正式部署出現錯誤,等於是一個預演的動作。

以上是今天的文章,謝謝大家的閱讀,如有錯誤歡迎指教,謝謝。


上一篇
Day_09 : 讓 Vite 來開啟你的Vue 之 Vite 核心 Native ESM
下一篇
Day_11 : 讓 Vite 來開啟你的 Vue 之 Config 常見配置 (Vite 最終篇 XD)
系列文
前端黑洞計畫 (一) : 讓 Vite 來開啟你的Vue30

尚未有邦友留言

立即登入留言