多個(gè)Vue項(xiàng)目部署到服務(wù)器的步驟記錄
一、業(yè)務(wù)描述：
最近在做一個(gè)電商的項(xiàng)目，里面有平臺(tái)端和商家端以及用戶端，那么這么多Vue項(xiàng)目如何部署到服務(wù)器呢？
二、部署
（1）首先在本地測(cè)試項(xiàng)目可以啟動(dòng)并且能正常運(yùn)行。
（2）在項(xiàng)目中輸入npm run build
此時(shí)會(huì)生成一個(gè)文件
（3）在服務(wù)器上安裝Nginx，并將admin-web上傳到服務(wù)器。
我上傳的位置：
（4）修改Nginx文件，找到nginx.conf
三、如果此時(shí)有多個(gè)vue項(xiàng)目呢？
多加幾個(gè)location即可
四、最后記得保存
:wq
五、重新啟動(dòng)Nginx
systemctl restart nginx
六：Nginx.conf的內(nèi)容
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html/dist/;
index index.html index.htm;
try_files $uri $uri/ @router;
index index.html;
}
#對(duì)應(yīng)上面的@router，主要原因是路由的路徑資源并不是一個(gè)真實(shí)的路徑，所以無法找到具體的文件
location @router {
# #因此需要rewrite到index.html中，然后交給路由再處理請(qǐng)求資源
rewrite ^.*$ /index.html last;
}
location /admin {
alias /usr/local/nginx/admin/dist;
index index.html index.htm;
try_files $uri $uri/ @router;
index index.html;
}
#對(duì)應(yīng)上面的@router，主要原因是路由的路徑資源并不是一個(gè)真實(shí)的路徑，所以無法找到具體的
location @router {
# #因此需要rewrite到index.html中，然后交給路由再處理請(qǐng)求資源
try_files $uri $uri/ @router;
index index.html;
}
#對(duì)應(yīng)上面的@router，主要原因是路由的路徑資源并不是一個(gè)真實(shí)的路徑，所以無法找到具體>的文件
location @router {
# #因此需要rewrite到index.html中，然后交給路由再處理請(qǐng)求資源
rewrite ^.*$ /index.html last;
}
總結(jié)
到此這篇關(guān)于多個(gè)Vue項(xiàng)目部署到服務(wù)器的文章就介紹到這了,更多相關(guān)多個(gè)Vue項(xiàng)目部署到服務(wù)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vite是一款非常輕量級(jí)的Web開發(fā)框架，它可以幫助開發(fā)者快速搭建一個(gè)開發(fā)環(huán)境。Vite搭建的開發(fā)環(huán)境可以提供更快的編譯速度，更少的配置，更好的性能和更多的開發(fā)者友好性，使開發(fā)者可以更快地構(gòu)建出功能強(qiáng)大的Web應(yīng)用程序。2023-02-02
vue3中reactive的對(duì)象清空所引發(fā)的問題解決方案(清空不了和清空之后再去賦值就賦值不了)
在使用reactive定義的變量時(shí),直接賦值會(huì)失去響應(yīng)式,為了清空?filters并確保響應(yīng)式,可以使用Object.assign({},?filters)或者遍歷對(duì)象逐個(gè)清除屬性,本文介紹vue3中reactive的對(duì)象清空所引發(fā)的問題解決方案(清空不了和清空之后再去賦值就賦值不了),感興趣的朋友一起看看吧2025-02-02
一文詳解Vue中內(nèi)存泄漏的場(chǎng)景與預(yù)防技巧
即便是功能強(qiáng)大的?Vue.js?也無法完全避免內(nèi)存泄漏的問題,內(nèi)存泄漏不僅會(huì)影響應(yīng)用的性能,還可能導(dǎo)致瀏覽器崩潰,下面我們來看看Vue?中常見的內(nèi)存泄漏場(chǎng)景以及如何避免這些問題吧2024-12-12
vue.js動(dòng)態(tài)修改background-image問題
這篇文章主要介紹了vue.js動(dòng)態(tài)修改background-image問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue使用element-ui實(shí)現(xiàn)表單驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue使用element-ui實(shí)現(xiàn)表單驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了vue通過?API?監(jiān)聽數(shù)組的變化,在?Vue?中，你可以通過監(jiān)聽數(shù)組的變化來更新界面，Vue?提供了一些特殊的語法以及?API?來實(shí)現(xiàn)對(duì)數(shù)組的監(jiān)聽，本文通過實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
Vue單頁及多頁應(yīng)用全局配置404頁面實(shí)踐記錄
無論單頁還是多頁，我的實(shí)現(xiàn)思路是總體配置404頁面的思路就是在前端路由表中添加一個(gè) path: '/404' 的路由，渲染相應(yīng)的404頁面。這篇文章主要介紹了Vue單頁及多頁應(yīng)用全局配置404頁面實(shí)踐,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了Vue.js上傳圖片到阿里云OSS存儲(chǔ)的方法示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
vue中vue-cli項(xiàng)目報(bào)錯(cuò)sockjs.js報(bào)錯(cuò)問題
這篇文章主要介紹了vue中vue-cli項(xiàng)目報(bào)錯(cuò)sockjs.js報(bào)錯(cuò)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-12-12
前端Vue3項(xiàng)目打包成Docker鏡像運(yùn)行的詳細(xì)步驟
將Vue3項(xiàng)目打包、編寫Dockerfile、構(gòu)建Docker鏡像和運(yùn)行容器是部署Vue3項(xiàng)目到Docker的主要步驟,這篇文章主要介紹了前端Vue3項(xiàng)目打包成Docker鏡像運(yùn)行的詳細(xì)步驟,需要的朋友可以參考下2024-09-09