vue項(xiàng)目如何分環(huán)境部署
vue部署
1、相關(guān)配置
staging可以認(rèn)為是測(cè)試環(huán)境，production可以認(rèn)為是正式環(huán)境
vue.config.js需要進(jìn)行配置，多環(huán)境的時(shí)候，這里主要看具體的情況，根據(jù)具體情況去設(shè)計(jì)，我這里是有兩個(gè)環(huán)境，需要部署在同個(gè)服務(wù)器上，所以需要生成不同的包
2、查看package.json腳本
并執(zhí)行
假設(shè)我這里是部署測(cè)試環(huán)境，則使用
npm run build:stage
執(zhí)行之后則會(huì)生成一個(gè)文件夾
里邊存放著編譯后的東西
3、將編譯后的文件夾放到linux服務(wù)器上
并記住存放位置
例如我是放在這個(gè)位置的,具體的上傳方式很多，可以使用xshell，也可以使用finalShell，這里就不細(xì)講
4、配置nginx
這里自己找一下自己的nginx.conf文件
如果不知道nginx安裝在哪的話，使用
ps -ef|grep nginx
就可以找到路徑了，放在conf/nginx.conf目錄下
user root;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
# 端口
listen 81;
server_name localhost;
# nginx的默認(rèn)頁(yè)面
location / {
root html;
index index.html index.htm;
}
# 這里配置的是測(cè)試服的，也就是說(shuō)當(dāng)你訪問(wèn) ip:81/test-qd-web的時(shí)候，
# 他就會(huì)/opt/test/qd_cold_chain/test-qd-web 文件夾下查找文件
location /test-qd-web {
root /opt/test/qd_cold_chain;
index index.html index.htm;
}
# 同上，正式服的
location /qd_web {
root /opt/qd_cold_chain;
index index.html index.htm;
}
}
}5、重載nginx
進(jìn)入到nginx的sbin目錄下，執(zhí)行
./nginx -s reload
6、訪問(wèn)目錄
ip:端口/test-qd-web
訪問(wèn)成功就ok了
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli項(xiàng)目無(wú)法用本機(jī)IP訪問(wèn)的解決方法
今天小編就為大家分享一篇vue-cli項(xiàng)目無(wú)法用本機(jī)IP訪問(wèn)的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面并攜帶參數(shù)的解決方法
這篇文章主要介紹了vue從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面并攜帶參數(shù)的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue中實(shí)現(xiàn)支持txt,docx,xlsx,mp4格式文件預(yù)覽功能(純前端)
對(duì)于Vue你可以實(shí)現(xiàn)文件的預(yù)覽功能,這篇文章主要給大家介紹了關(guān)于vue中實(shí)現(xiàn)支持txt,docx,xlsx,mp4格式文件預(yù)覽功能的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
vue實(shí)現(xiàn)移動(dòng)端可拖拽式icon圖標(biāo)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端可拖拽式icon圖標(biāo)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue項(xiàng)目中使用AvueJs的詳細(xì)教程
Avue.js是基于現(xiàn)有的element-ui庫(kù)進(jìn)行的二次封裝，簡(jiǎn)化一些繁瑣的操作，核心理念為數(shù)據(jù)驅(qū)動(dòng)視圖,主要的組件庫(kù)針對(duì)table表格和form表單場(chǎng)景，這篇文章給大家介紹了vue項(xiàng)目中使用AvueJs的相關(guān)知識(shí)，感興趣的朋友跟隨小編一起看看吧2022-10-10
vue組件中使用props傳遞數(shù)據(jù)的實(shí)例詳解
這篇文章主要介紹了vue組件中使用props傳遞數(shù)據(jù)的實(shí)例詳解,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-04-04
利用vue3+threejs仿iView官網(wǎng)大波浪特效實(shí)例
最近好幾個(gè)vue項(xiàng)目都是用ivew作為UI框架,所以下面這篇文章主要給大家介紹了關(guān)于如何利用vue3?+?threejs仿iView官網(wǎng)大波浪特效的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12
這篇文章主要介紹了如何設(shè)置Vue全局公共方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
我們?cè)谧龊笈_(tái)管理系統(tǒng)里面有非常多的表單需求,下面這篇文章主要給大家介紹了關(guān)于Vue如何獲取表單數(shù)據(jù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細(xì)介紹了vue3.0實(shí)現(xiàn)考勤日歷組件使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08