vue項目打包部署流程分析
一、打包
（可選）去除打包后會生成的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文件放到該文件夾下
進(jìn)入/etc目錄，目錄中有一個nginx目錄，進(jìn)入該目錄。如果沒有nginx目錄說明沒有安裝nginx，需要安裝nginx：在/etc目錄下運行yum install nginx
修改nginx配置，運行vim nginx.conf進(jìn)行編輯
按 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進(jìn)行保存
重新運行nginx：systemctl restart nginx
訪問服務(wù)器地址，即可訪問到項目
注：4-8步可通過xftp直接在nginx.conf文件中進(jìn)行編輯，但也要注意空格
補充：
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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
我們最開始拿到的element-ui是帶有下拉箭頭的,那么如何去除element-ui下拉框的下拉箭頭的實現(xiàn),本文就詳細(xì)的介紹一下,感興趣的可以了解一下2023-08-08
大部分中文應(yīng)用彈出的默認(rèn)鍵盤是簡體中文輸入法鍵盤,在輸入用戶名和密碼的時候,如果使用簡體中文輸入法鍵盤,用戶的輸入記錄會被緩存下來所以我們需要一個安全鍵盤,本文給大家介紹了如何基于vue封裝一個安全鍵盤組件,需要的朋友可以參考下2023-12-12
在Vue3中創(chuàng)建和使用全局組件的實現(xiàn)方式
在前端開發(fā)中,Vue.js 是一個廣泛使用的框架,因其靈活性和強大的功能,得到許多開發(fā)者的喜愛,Vue 3 的發(fā)布為這一框架帶來了很多新的特性和改進(jìn),在本文中,我們將詳細(xì)討論如何在 Vue 3 中創(chuàng)建和使用全局組件,并通過示例代碼展示具體實現(xiàn)方式,需要的朋友可以參考下2024-07-07
詳解Vue中l(wèi)ocalstorage和sessionstorage的使用
這篇文章主要介紹了詳解Vue中l(wèi)ocalstorage和sessionstorage的使用方法和經(jīng)驗心得，有需要的朋友跟著小編參考學(xué)習(xí)下吧。2017-12-12
這篇文章主要介紹了vue中require與import的區(qū)別詳解,require相當(dāng)于module.exports的傳送門,module.exports后面的內(nèi)容是什么,require的結(jié)果就是什么,對象、數(shù)字、字符串、函數(shù),再把require的結(jié)果賦值給某個變量,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Python合成Excel表的實現(xiàn)代碼（多sheet）,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
如何使用vue實現(xiàn)前端導(dǎo)入excel數(shù)據(jù)
在實際開發(fā)中導(dǎo)入功能是非常常見的,導(dǎo)入功能前端并不難,下面這篇文章主要給大家介紹了關(guān)于如何使用vue實現(xiàn)前端導(dǎo)入excel數(shù)據(jù)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
ElementUI實現(xiàn)el-table列寬自適應(yīng)的代碼詳解
這篇文章給大家介紹了ElementUI實現(xiàn)el-table列寬自適應(yīng)的詳細(xì)步驟,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
這篇文章主要給大家介紹了關(guān)于Vue中進(jìn)行打包與部署的相關(guān)資料, 我們常使用前后端分離項目時,會需要將前端vue打包然后部署,需要的朋友可以參考下2023-09-09
element的el-tree多選樹(復(fù)選框)父子節(jié)點關(guān)聯(lián)不關(guān)聯(lián)
最近想要實現(xiàn)多選框關(guān)聯(lián)的功能，但是卻出現(xiàn)了element的el-tree多選樹(復(fù)選框)父子節(jié)點關(guān)聯(lián)不關(guān)聯(lián)的問題，本文就來介紹一下解決方法，一起來了解一下2021-05-05