目前我們編輯的vue組件文件、scss樣式工具文件都是在開發環境中作用的，我們需要使用npm run serve方法開啟端口進行訪問。 但在生產環境（項目上線環境）下，我們需要將開發環境中的文件編譯成生產環境代碼，將vue組件文件和scss樣式工具文件編譯成靜態的html、css文件，同時將admin端、web端放入server端，從而形成一個完整的網站形態。 如需要訪問web端，則訪問域名:3000/web（本地環境如localhost:3000/web）。 1.通過npm run build對admin端直接編譯 首先確保admin端沒有運行，然后對admin端文件進行編譯： ``` cd admin npm run build ```  此時，正在編譯，編譯完成后，在admin端中就生成了我們日常使用的靜態文件，還為我們分好了類。  之后這些靜態文件就可以上傳至任何服務器中顯示。 2.使用serve命令查看編譯后的admin端 安裝serve命令方法： ``` npm i -g serve ```  使用serve方法查看靜態文件： ``` serve dist ```  生成了5000端口號的鏈接，點擊進入：  沒問題。 此時的靜態文件與開發環境中邏輯相同，依附著server端進行數據查詢抽取，如果單獨將這些頁面放入服務器中運行的話也就只是普通的靜態頁面無法進行數據交互。 所以我們如果想要正常獲取接口，需要替換一下接口地址，將接口地址替換成同樣上線的服務接口地址，可以涉及前后端分離。  但我們到目前位置想做的就是整套網站開發，使用的就是之前制作的server端，現在只需要將admin端靜態文件放入server端，讓admin端與server端成一體即可，繼續使用server端后臺。 3.將生成的admin靜態文件放入server端 首先修改baseURL接口地址，改為動態切換，分別是之前的開發環境接口地址(localhost)和生產環境接口地址。 （1）利用vue-cli方法定義接口地址變量 定義接口地址環境變量process.env.VUE_APP_API_URL，其中process.env是環境變量，環境變量中定義以VUE_APP開頭的變量名，起名為_API_URL。  一般在客戶端是沒有process環境變量的，但我們使用vue-cli中的vue pack打包后就可以生成這個環境變量。 同時我們在admin端新建一個環境變量文件 .env.development（生產環境下的環境變量）：  此環境變量的接口地址用于開發環境，但如果沒有這個環境變量，也就是在生產環境中，我們需要給其設定一個絕對地址’/admin/api‘，確保在生產環境中調用接口找到正確的接口地址。 如此就實現了baseURL的動態接口地址綁定。  （2）再次編譯admin端，將生成的admin靜態文件放入server端 ``` cd admin npm run build ``` 編譯完成后我們再次到app.js靜態文件中查找接口地址，查看剛剛的修改：  成功，沒問題。 此時我們將生成的靜態文件放入server端，后續通過server端進行訪問（localhost:3000/admin）。 在server端新建文件夾admin，復制生成的dist文件夾中的文件，粘貼到server端下面的admin文件夾中：  由于這些文件均視為靜態文件，所以定義路由方法與圖片上傳一樣：  此時進入server端，輸入路由地址 localhost:3000/admin：  此時頁面并未出現我們預想的頁面，但在Network中可以看出文件確實被引用且找到，但卻找不到css和js文件，這是因為css和js文件地址錯誤導致，檢查admin中index.html靜態文件：  文件地址是’/css‘，但如果想查詢成功，地址應該是’/admin/css’才可以。 此時我們修改server端中admin的靜態路由，將’/admin’改為’/’：  此時直接訪問localhost:3000則可正常打開admin端。 但這與我們預想的localhost:3000/admin和localhost:3000/web不符合，所以我們要進行下一步修改。 4.使用vue CLI設置靜態文件編譯位置 首先我們參考vue CLI配置參考  在admin端新建vue-cli配置文件vue.config.js：  ``` module.exports = { // 輸出文件夾（配置文件時，將配置好的靜態文件直接輸出到server端下面的admin文件夾，而不用輸出到admin端的dist文件夾中） outputDir: __dirname + '/../server/admin', // 默認公共路徑：如果環境變量 === '生產環境'，則使用'/admin'的publicPath，否則直接使用'/' publicPath: process.env.NODE_ENV === 'production' ? '/admin/' : '/', } ``` 完成配置后，我們將之前生成的admin端靜態文件都刪除（包括server/admin和admin/dist），重新生成admin端靜態文件：  ``` cd admin npm run build ```  此時生成的admin端靜態文件自動輸出到server/admin文件夾中，同時文件路徑均改為了/admin/js/…。 這樣，在server端index.js路由中將地址改回/admin，測試：   沒問題，到此admin端生產環境編譯過程完成。 web端與admin端相同，大家自行測試。下節我們購買域名和服務器進行線上部署。