# Vue CLi學習#7 Vue CLi 編譯設定檔
###### tags: `Vue cli`

## 範例使用 Live server 來開啟 ( Go Live )
## npm run build

使用 `npm run build`，可以將你的 Vue 專案進行編譯

## 打開編譯完的 index.html

在編譯完之後會出現 **dist** 這個資料夾，在裡面有一個 index.html

### 直接去打開這個資料夾的 index.html，或是直接在專案中用 live server 開啟 index.html

#### 你會發現怎麼是空的

原因是因為在編譯的時候是將 dist 視為根目錄，所以是空的


### 如何開起來是正常的

這時候<font color='red'>單獨</font>把 dist 資料夾放到 VS CODE 上，並透過 VS CODE 的 live server 開啟
這時候就成功了!!

## 如何調整編譯後的路徑

### 編譯完後的 dist 檔案

你會發現路徑都是經過編譯完後的檔案

### 環境變數

`.env` 檔案是全環境通用的環境變數，所以編譯完後都讀的到這個環境變數

#### 那如果只想讓正式上線的最終環境所使用呢?

那可以在創立一個 `.env.production` 的環境變數檔案，在最終環境中才能讀到這個環境變數

### vue.config -- 調整編譯後路徑

#### 使用 Vue GUI 來設定

在 GUI 匯入專案之後，點擊 設定 -> Vue CLi -> 在公開路徑下 新增 `/dist/` ， 並確認修改

這時可以看到專案的 vue.config 檔案，出現一個公開路徑是你填寫的 `/dist/` 了

## 再編譯一次

這時就可以看到在 dist 的 index.html 再路徑上出現 dist 了!

## 再次的直接在專案的 dist 資料夾的 index.html 用 live server 開啟


## 成功!

## 什麼時候會用到?

#### 當共同開發時，需要將路徑更改到後端工程師可以到的路徑，或是其他需求時去更改