###### <p style="text-align: right"> 建立日期：2020-12-18 / 更新日期：2020-12-23</p>

# Vue CLI 3.x版本的資料夾結構

###### tags: `Vue.js` `Vue CLI`

## /dist
執行 npm run build 後，編譯後的檔案存放位置，一定要在 HTTP server 下運行

## /node_modules
透過 npm 安裝的相依套件、Webpack 設定檔
* /@vue/webpack.config.js：Webpack 設定檔
* /@vue/lib：Webpack 其他設定檔，比較少調整

## /public
存放不會被編譯的檔案
* index.html：會被編譯，會被壓縮，插入在 src 撰寫的內容

## /src
* /assets：存放會被編譯的靜態檔案
* 圖檔檔案大小在 Webpack 設定範圍內會被編譯成 base64 的格式，可以減少對伺服器的請求，加快網頁載入速度。設定位置在 webpack.base.conf.js > module > loader: 'url-loader' > options > limit: 限制要轉成 base64 格式的檔案大小最大值，單位為 bytes[^1]
* /components：存放內部元件
* /views：存放外部分頁元件
* App.vue：
* main.js：在 Webpack 內設定 main.js 作為 entry 進入點，會 import 許多檔案

## .babel.config.js

## .env
自行新增，設定環境變數，設定完要重啟 `npm run serve`[^2]
* 加入：`VUE_APP_XXX=*****`，XXX 自己命名
* 讀取：`process.env.VUE_APP_XXX`
* .[mode名稱]：要切換到指定環境，可以在 package.json 的 `"serve"` 加上 `--mode mode名稱`切換特定環境
* .development：預設的環境變數名稱，不需在 package.json 的 `"serve"` 加上 `--mode development`，是 package.json 內 `npm run serve` 的預設環境，權重比一般的 .env 還高
* .production：預設的環境變數名稱，是 package.json 內 `npm run build` 的預設環境，權重比一般的 .env 還高

## .gitignore

## package-lock.json

## package.json

## README&#46;md

[^1]: [url-loader limit](https://webpack.js.org/loaders/url-loader/#limit "url-loader")
[^2]: [模式和环境变量](https://cli.vuejs.org/zh/guide/mode-and-env.html "模式和环境变量")