技能學習：學習使用golang（gin架構） + vue.js，開發前端全棧網站-10.生産環境編譯
相關文章：
技能學習：學習使用golang（gin架構） + vue.js，開發前端全棧網站-1.工具和本地環境
技能學習：學習使用golang（gin架構） + vue.js，開發前端全棧網站-2.啟動項目
技能學習：學習使用golang（gin架構） + vue.js，開發前端全棧網站-3.接收json資料
技能學習：學習使用golang（gin架構） + vue.js，開發前端全棧網站-4.連接配接mongodb資料庫
技能學習：學習使用golang（gin架構） + vue.js，開發前端全棧網站-5.跨域并跨域傳輸資料
技能學習：學習使用golang（gin架構） + vue.js，開發前端全棧網站-6.GO語言做通用CRUD接口-1
技能學習：學習使用golang（gin架構） + vue.js，開發前端全棧網站-7.GO語言做通用CRUD接口-2
技能學習：學習使用golang（gin架構） + vue.js，開發前端全棧網站-8.模型的關聯——無限層級分類
技能學習：學習使用golang（gin架構） + vue.js，開發前端全棧網站-9.管理者及登入注冊功能的實作
技能學習：學習使用golang（gin架構） + vue.js，開發前端全棧網站-10.生産環境編譯
目前可以将server端和admin端看作兩個項目，一個後端項目一個前端項目，這兩個項目的互相調用就是前後端分離的狀态。
但要想讓兩個項目一起上線，就需要對前端進行生産環境的編譯，将重新編譯後的admin端放入server端，通過server端顯示在頁面上。
1.通過npm run build對admin端直接編譯
首先確定admin端沒有運作，然後對admin端檔案進行編譯：
cd admin
npm run build
等待幾十秒，編譯成功：
之後這些靜态檔案就可以上傳至任何伺服器中顯示。
2.使用serve指令檢視編譯後的admin端
編譯後的靜态檔案我們就不能通過vue和npm進行通路（npm run serve）。是以我們要使用第三方serve包，友善檢查、調試生成的靜态檔案。
安裝serve指令方法：
npm i -g serve
使用serve方法檢視靜态檔案：
此時我們就可以通過5000端口檢視生成的靜态檔案：
沒問題，此時接口也可以調用，因為目前所處環境是我們正在運作的本地環境中。如果這段代碼放到其他伺服器中，就不能完成接口的調用。是以目前生成的靜态檔案，隻能針對其對應的server端進行互動。
3.将生成的admin靜态檔案放入server端
因為在本地環境中，我們使用的接口位址是本地環境的絕對位址http:localhost:3000/admin/api，但是如果項目上線，接口位址就需要是http://域名/admin/api：
是以，首先修改baseURL接口位址，改為動态切換，分别是之前的開發環境接口位址(localhost)和生産環境接口位址。
（1）利用vue-cli方法定義接口位址變量
定義接口位址環境變量process.env.VUE_APP_API_URL，其中process.env是環境變量，環境變量中定義以VUE_APP開頭的變量名，起名為_API_URL。
（2）在admin端建立一個環境變量檔案 .env.development（這裡存放生産環境下的環境變量）：
将本地接口放入，這個位址變量友善我們在本地調試時連接配接接口。
（3）如果不在本地環境
如果不在本地環境，在上線的伺服器中，環境就是上線伺服器，位址就是伺服器的IP或解析的域名。
比如說現在我們本地通路server端位址是http://localhost:3000或http://127.0.0.1:3000，那麼上線後通路位址就是http://域名或IP。
是以接口位址也應為http://域名或IP/admin/api。
此時process.env.VUE_APP_API_URL是本地環境中的變量，那麼非本地環境時我們隻需要拼接"/admin/api"即可：
（4）使用vue CLI設定靜态檔案編譯位置
目前，我們使用
npm run build
對admin端進行靜态編譯時，生成的檔案位址是admin端下方，但是我們每次将靜态檔案生成到admin端後再複制粘貼到server端是很麻煩的，是以使用vue-cli工具設定一個檔案生成位址：
vue-cli配置參考
在admin端建立vue-cli配置檔案vue.config.js：
module.exports = {
// 輸出檔案夾（配置檔案時，将配置好的靜态檔案直接輸出到server端下面的admin檔案夾，而不用輸出到admin端的dist檔案夾中）
outputDir: __dirname + '/../server/admin',
}
儲存配置，再次
npm run build
編譯，靜态檔案成功生成到了server端下面的admin檔案夾：
4.server端顯示靜态檔案
// 渲染前端渲染靜态檔案模闆
r.LoadHTMLGlob("admin/*.html") // 添加入口index.html
r.LoadHTMLFiles("admin/*/*") // 定義資源路徑
r.Static("/static/admin", "./admin/") // 添加資源路徑
r.StaticFile("/ads/", "admin/index.html") // 添加前端接口
這四行代碼就可以将vue-cli編譯的靜态檔案在後端渲染出來，前提是路徑查找正确。上邊定義的路徑是根據我的前端編譯後檔案路徑設定的。
其中第三行添加資源路徑，設定路由位址必須以"static"開頭，否則編譯時會報錯：
同時，要想顯示，就必須再次修改前端vue.config生成代碼路徑，将static添加上：
這裡我的過程就不給大家展示了，大家自行測試一下，如果是按我之前的過程寫下來的，上邊四行代碼就可以完成。如果有疑問可以私信我或者在下方評論，我單獨給解答一下。
此時，通過3000端口就可以通路前端搭建的靜态頁面，且接口都沒問題：
到此，go + vue的全棧項目基本流程就完善了。
其他功能如圖檔上傳等大家可以根據手冊，并結合之前得nodejs+vue系列文章制作。
本系列文章到此結束，下一系列文章暫定一起學習thinkphp6+vue搭建項目網站（因為目前公司做的是PHP+MYSQL，我以前使用tp5搭建得混亂不堪，正好借此機會整理翻新一下網站）。
更多設計、功能的學習經驗，大家也可以去我的公衆号檢視！
————
技能學習：學習使用golang（gin架構） + vue.js，開發前端全棧網站-10.生産環境編譯