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