一.vue打包

1.獲得前端程式碼,在webstorm上開啟

在終端輸入npm run build

2.打包完成後在原來的程式碼包中可以看到一個新的資料夾---dist

3.將dist資料夾壓縮上傳到nginx的本地安裝資料夾(注意不是download資料夾,而是usr/local)

二.伺服器上部署

1.解壓dist

2.配置conf

找到nginx資料夾下的conf資料夾,點選nginx.conf進行配置

3.具體配置

找到http下的第一個server,對其中的listen,server_name,location進行修改

其中server_name+listen=最後的訪問地址,原理是通過訪問這個地址就可以對映到location對應的檔案,也就是nginx資料夾--webapp資料夾--dist資料夾下的index.html頁面

4.nginx服務命令

(1)啟動 Nginx

systemctl start nginx

(2)停止 Nginx
systemctl stop nginx

(3)重啟 Nginx
systemctl restart nginx

(4)重新載入 Nginx，用於修改配置後
systemctl reload nginx

(5)設定開機啟動 Nginx
systemctl enable nginx

(6)關閉開機啟動 Nginx
systemctl disable nginx

(7)檢視 Nginx 執行狀態
systemctl status nginx

5.上傳+配置完成後,啟動nginx服務即可

三.總結

1.打包得到dist並上傳到nginx資料夾

2.在nginx.conf中進行配置,使訪問地址對映到dist中的index.html