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-cli將index.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 build 與yarn 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環境下，預先檢查打包的內容是否可以正常使用了，以免正式部署出現錯誤，等於是一個預演的動作。

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