# Vue CLI

|🚨 <span class="caution">CAUTION</span>|
|:---|
|Vue CLI 現已進入維護模式，若可以盡可能使用 [Vite](/@RogelioKG/vite)|

## References
+ 🔗 [**Vue CLI**](https://cli.vuejs.org/)
+ 🔗 [**Kuro Hsu - Vue CLI**](https://book.vue.tw/CH3/3-1-vue-cli-introduction.html)

## Why?

1. 前端開發日趨複雜，每個開發者習慣亦有很大不同，整合性的工具可減少彼此開發上的差異。
2. 編譯環境越來越複雜，缺乏整合工具將會在每次專案都耗去大量時間。
3. 前後端分離形成主流，單頁式應用程式更符合開發習慣。
4. 套件引用越來越多，導致難以管理。

## Project

vue create [專案名稱]

## Note

├── node_modules/     # 相依套件
│
├── dist/             # 打包後的檔案
├── public/           # 公開檔案目錄
│ ├── favicon.ico
│ └── index.html      # 根元件的掛載點
│
├── src/              # 原始碼目錄
│ ├── assets/         # 靜態檔案
│ ├── components/     # 元件檔案
│ ├── router/         # 路由表
│ ├── App.vue         # 根元件
│ └── main.js         # Vue 專案進入點
│
├── ...               # 一大堆設定檔
├── package-lock.json # 套件精確版本紀錄檔
├── package.json      # 相依套件設定檔
└── README.md

### Env Variables

+ 設定檔

  .env                  # 在所有的環境中被載入
  .env.local            # 在所有的環境中被載入，但會被 git 忽略
  .env.[mode]           # 只在指定的模式中被載入
  .env.[mode].local     # 只在指定的模式中被載入，但會被 git 忽略

+ JS 調用

  process.env.VARNAME

|🚨 <span class="caution">CAUTION</span>|
|:---|
|只有 <mark>`BASE_URL`</mark>、<mark>`NODE_ENV`</mark>、<mark>`VUE_APP_` 開頭</mark>的環境變數才能被調用|
|無論是哪種設定檔都是用 `process.env` 調用環境變數|
|修改設定檔後，必須重新啟動 server 才能套用變更後的環境變數<br />(無法跟著 hot reload 變更)|

### 打包

生產環境裡裡的 URL，是把 dist 當作頂層目錄，
所以說如果要測試 dist，要用 VScode 打開此目錄，再打開 Live Server。


或者你也可以修改 `vue.config.js`，變更生產環境的根目錄

const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: '/dist/', // ✅ Here!
});