一、vue前端項目打包過程
1.vscode前端開發工具簡介
Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級代碼編輯器，支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性，支持插件擴展，並針對網頁開發和雲端應用開發做了優化。軟件跨平臺支持 Win、Mac 以及 Linux。
我們的前端項目主要是在vscode中進行開發，項目的整體目錄結構如下：
2.在config目錄下的prod.env.js文件當中配置我們後端服務器的IP地址和端口號，因爲這是在實際的部署當中所以必須要在生成環境下進行項目的部署。
如圖所示：
配置代碼如下：
SERVICE_API: ‘“http://10.118.1.127:9101”’,
BASE_API: ‘“http://10.118.1.127:9103”’
3.修改路由router，否則地址訪問會出錯
module.exports = file => () => import(’@/views’ + file + ‘.vue’)
項目結構圖如下：
4.在終端輸入npm run build
之後會自動生成一個dit文件夾，這就是我們打包後所需要的項目文件，放到服務器上，路徑要與nginx配置路徑一致（之後具體講解）
二、Linux服務器上安裝nginx並且進行相關配置
1.nginx簡介
Nginx（發音同 engine x）是一款輕量級的Web 服務器／反向代理服務器及電子郵件（IMAP/POP3）代理服務器，並在一個BSD-like 協議下發行。我們可以將我們打包好的前端項目通過nginx代理去訪問。
2.在linux上安裝nginx以及常用命令符
下載：
#wget http://nginx.org/download/nginx-1.13.6.tar.gz
解壓縮
#tar -zvxf nginx-1.13.6.tar.gz
#cd nginx-1.13.6
安裝：
#./configure --with-http_ssl_module --with-http_gzip_static_module
#make
#make install
啓動程序：
#cd /usr/local/nginx/sbin/
#./nginx
查看運行狀態：
#ps aux | grep nginx
3.nginx前端項目代理地址配置
在/usr/local/nginx/conf目錄下配置nginx.conf文件只要修改root即可，（root爲項目打包後文件的存放路徑。）
修改配置代碼如下：
server {
listen 9104;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /home/kaifa01/purchase/web/dist;
index index.html index.htm;
}
add_header Access-Control-Allow-Origin "*";
default_type 'text/html';
charset utf-8;
#error_page 404 /404.html;
}
4.conf配置文件的啓動
在實際當中服務器中可能有多個vue前端項目，此時我們只要單獨修該conf文件即可，一個前端項目對應的一個conf文件。
conf啓動命令符如下：
啓動項目指定配置文件 #cd /usr/local/nginx/sbin/ ./nginx -c conf/nginx_hwfm.conf
查看啓動進程： #ps -ef|grep nginx_hwfm
殺掉進程： kill -9 進程號
如圖所示
5.nginx其它常用命令
(1)啓動nginx:
#cd /usr/local/nginx/sbin/
#./nginx
(2)查看運行狀態
ps aux | grep nginx
（3）停止nginx
./nginx –s stop
(5)檢查配置文件是否正確
./nginx –t
(7)查看nginx版本
$ ./nginx -v
(8）配置文件位置
/usr/local/nginx/conf/nginx.conf
6.拓展（window下nginx啓動命令）
cd MyDownloads\nginx-1.15.3
start nginx
nginx -s stop
nginx -s reload
三、在Linux服務器上進行項目部署過程
1.安裝 xshell 、xftp軟件
Xshell功能簡介
Xshell [1] 是一個強大的安全終端模擬軟件，它支持SSH1, SSH2, 以及Microsoft Windows 平臺的TELNET 協議。Xshell 通過互聯網到遠程主機的安全連接以及它創新性的設計和特色幫助用戶在複雜的網絡環境中享受他們的工作。
Xshell可以在Windows界面下用來訪問遠端不同系統下的服務器，從而比較好的達到遠程控制終端的目的。除此之外，其還有豐富的外觀配色方案以及樣式選擇。
Xftp 功能簡介
是一個基於 MS windows 平臺的功能強大的SFTP、FTP 文件傳輸軟件。使用了 Xftp 以後，MS windows 用戶能安全地在 UNIX/Linux 和 Windows PC 之間傳輸文件。Xftp 能同時適應初級用戶和高級用戶的需要。它採用了標準的 Windows 風格的嚮導，它簡單的界面能與其他 Windows 應用程序緊密地協同工作，此外它還爲高級用戶提供了衆多強勁的功能特性。
2.通過安裝以上兩個軟件可以實現window電腦遠程控制Linux服務器，這樣就可以將我們打包好的dist文件傳輸到Linux服務器上進行項目的部署(地址要與nginx當中的conf配置文件下的root地址一致)。項目存放結構圖如下：
3.將dist文件傳輸上去，我們只需啓動一次conf文件即可，在之後的重新部署過程當中，只需要替換dist打包文件即可，不需要重新啓動nginx,(是不是感覺nginx很強大啊)
4.至此前端vue項目已經部署成功，但是不要高興的太早Linux上防火牆默認是開的，我們需要開放我們的項目端口號，這樣我們就可以在任何一臺電腦上訪問我們的前端項目了。
至此vue前端項目打包部署過程已經完成，但這只是前端項目，往往在實際當中我們還需要打包部署我們的後端項目，如果您對springboot後端項目的打包部署比較感興趣，可以查看我的上篇博客文章