一、打包

（可選）去除打包后會生成的map文件：在vue.config.js中添加productionSourceMap: false,

map文件作用：項目打包后，代碼都是經(jīng)過壓縮加密的，如果運行時報錯，輸出的錯誤信息無法準(zhǔn)確得知是哪里的代碼報錯。map文件可以準(zhǔn)確輸出報錯位置。

項目終端運行npm run build，出現(xiàn)的dist文件即為打包后的文件

二、部署

xshell連接服務(wù)器（此處服務(wù)器為centos7）

利用xfp在服務(wù)器/root目錄下新建文件夾，將剛才打包生成的dist文件放到該文件夾下

進入/etc目錄，目錄中有一個nginx目錄，進入該目錄。如果沒有nginx目錄說明沒有安裝nginx，需要安裝nginx：在/etc目錄下運行yum install nginx

修改nginx配置，運行vim nginx.conf進行編輯

按 i 開始編輯，添加

locatioin / {}配置使訪問服務(wù)器即可訪問到項目，為root部署到服務(wù)器的路徑
location /api {}配置nginx反向代理，使得服務(wù)器可以獲取從其他服務(wù)器獲取的數(shù)據(jù)，/api為項目配置時代理跨域的路徑名，proxy_pass為對應(yīng)服務(wù)器地址

注意1：添加配置時要注意空格、分號及單詞拼寫，由于windows和Linux空格不同，此處最好自己手寫，不要復(fù)制

注意2：還要將開頭的user nginx改成user root，不改訪問網(wǎng)址會報500錯誤

注意3：修改完后restart nginx，start無效

按esc退出編輯

輸入:wq進行保存

重新運行nginx：systemctl restart nginx

訪問服務(wù)器地址，即可訪問到項目

注：4-8步可通過xftp直接在nginx.conf文件中進行編輯，但也要注意空格

補充：
systemctl status nginx：查看nginx狀態(tài)

systemctl start nginx：啟動nginx

systemctl stop nginx：停止nginx

systemctl restart nginx：重啟nginx

三、部署多個項目

在nginx.conf中修改配置，訪問時用服務(wù)器地址/sph即可訪問

到此這篇關(guān)于vue項目打包部署流程的文章就介紹到這了,更多相關(guān)vue打包部署內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論