一、打包

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

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

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

二、部署

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

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

進(jìn)入/etc目錄，目錄中有一個(gè)nginx目錄，進(jìn)入該目錄。如果沒(méi)有nginx目錄說(shuō)明沒(méi)有安裝nginx，需要安裝nginx：在/etc目錄下運(yùn)行yum install nginx

修改nginx配置，運(yùn)行vim nginx.conf進(jìn)行編輯

按 i 開(kāi)始編輯，添加

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

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

注意2：還要將開(kāi)頭的user nginx改成user root，不改訪問(wèn)網(wǎng)址會(huì)報(bào)500錯(cuò)誤

注意3：修改完后restart nginx，start無(wú)效

按esc退出編輯

輸入:wq進(jìn)行保存

重新運(yùn)行nginx：systemctl restart nginx

訪問(wèn)服務(wù)器地址，即可訪問(wèn)到項(xiàng)目

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

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

systemctl start nginx：?jiǎn)?dòng)nginx

systemctl stop nginx：停止nginx

systemctl restart nginx：重啟nginx

三、部署多個(gè)項(xiàng)目

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

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

最新評(píng)論