多個Vue項目部署到服務(wù)器的步驟記錄
更新時間：2020年10月22日 08:43:19 作者：趙曉東-Nastu
這篇文章主要給大家介紹了關(guān)于多個Vue項目部署到服務(wù)器的相關(guān)資料，文中通過圖文介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
一、業(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)文章
這篇文章主要介紹了聊聊Vue.js的template編譯的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
編譯優(yōu)化指的是編譯器將模板編譯為渲染函數(shù)的過程中，盡可能多的提取關(guān)鍵信息，并以此指導(dǎo)生成最優(yōu)代碼的過程，優(yōu)化的方向主要是區(qū)分動態(tài)內(nèi)容和靜態(tài)內(nèi)容，并針對不同的內(nèi)容采用不同的優(yōu)化策略2023-01-01
這篇文章主要介紹了在Vue中使用antv的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
如何優(yōu)雅的在一臺vps（云主機）上面部署vue+mongodb+express項目
這篇文章主要介紹了如何優(yōu)雅的在一臺vps（云主機）上面部署vue+mongodb+express項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了Vue.js實現(xiàn)拖放效果的實例的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
vue數(shù)據(jù)更新但視圖(DOM)不刷新的幾種解決辦法
這篇文章主要給大家介紹了關(guān)于vue數(shù)據(jù)更新但視圖(DOM)不刷新的幾種解決辦法,我們在開發(fā)過程中經(jīng)常會碰到數(shù)據(jù)更新,但是視圖并未改變的情況,需要的朋友可以參考下2023-08-08
vue3的介紹和兩種創(chuàng)建方式詳解(cli和vite)
這篇文章主要介紹了vue3的介紹和兩種創(chuàng)建方式(cli和vite),vue3對比vue2帶來的性能提升有很多優(yōu)勢，總體來說Vue 3在性能、開發(fā)體驗和代碼組織方面都有所改進，使得它更加適合于大型、復(fù)雜的應(yīng)用程序開發(fā)，需要的朋友可以參考下2023-04-04
當一個較復(fù)雜的vue項目打包后，文件會非常大，而且訪問時資源加載速度很慢，本文介紹了幾種措施來優(yōu)化。2020-09-09
Vue動態(tài)創(chuàng)建注冊component的實例代碼
這篇文章主要給大家介紹了關(guān)于Vue動態(tài)創(chuàng)建注冊component的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-06-06
vue中實現(xiàn)在外部調(diào)用methods的方法(推薦)
下面小編就為大家分享一篇vue中實現(xiàn)在外部調(diào)用methods的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02