nginx配置同一域名同一端口下部署多個vue項目
問題:
默認端口就只有一個,有多個項目需要部署到同一端口下。
解決方法:
根據(jù)根路徑不同分別代理訪問不同項目
第一步:
在vue.config.js文件中修改publicPath路徑為/project/
...... module.exports = { // 部署生產(chǎn)環(huán)境和開發(fā)環(huán)境下的URL。 // 默認情況下,Vue CLI 會假設(shè)你的應(yīng)用是被部署在一個域名的根路徑上 // 例如 https://www.ruoyi.vip/。如果應(yīng)用被部署在一個子路徑上,你就需要用這個選項指定這個子路徑。例如,如果你的應(yīng)用被部署在 https://www.ruoyi.vip/admin/,則設(shè)置 baseUrl 為 /admin/。 publicPath: "/project/", // 在npm run build 或 yarn build 時 ,生成文件的目錄名稱(要和baseUrl的生產(chǎn)環(huán)境路徑一致)(默認dist) outputDir: 'dist', // 用于放置生成的靜態(tài)資源 (js、css、img、fonts) 的;(項目打包之后,靜態(tài)資源會放在這個文件夾下) assetsDir: 'static', ...... }
第二步:
在router文件夾中index.js文件中修改base為 ‘/project/’
... ... const createRouter = () => new Router({ base: '/project/', // 調(diào)整這里,路徑跟publicPath保持一致即可 mode: 'history', // 去掉url中的# scrollBehavior: () => ({ y: 0 }), routes: routers })
打包
調(diào)整完畢后,直接執(zhí)行build打包命令,可以發(fā)現(xiàn)index.html引入js路徑增加了/project
... ... <script type="text/javascript" src="/project/static/js/chunk-vendors.js"></script> <script type="text/javascript" src="/project/static/js/app.js"></script> ... ...
調(diào)整nginx的server配置
server { listen 9001; server_name localhost; # 這個是第一個vue項目 頁面訪問地址 http://ip:9001 location / { # root F:/parant/dist; root /home/project/dist/; index index.html; try_files $uri $uri/ /index.html; } # 這個是第二個vue項目 頁面訪問地址 http://ip:9001/project location /project { # alias F:/subparant/dist; alias /home/other_project/dist/; index index.html; try_files $uri $uri/ /project/index.html; #解決刷新404 } }
注意:如果頁面中有二級路由的話,配置文件中一定不能用root,要用alias.
到此這篇關(guān)于nginx配置同一域名同一端口下部署多個vue項目的文章就介紹到這了,更多相關(guān)nginx部署多vue項目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
centos環(huán)境下nginx高可用集群的搭建指南
為了防止Nginx單點故障造成服務(wù)器癱瘓,本文介紹了Nginx實現(xiàn)高可用集群構(gòu)建,下面這篇文章主要給大家介紹了關(guān)于centos環(huán)境下nginx高可用集群的搭建指南,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07nginx 代理80端口轉(zhuǎn)443端口的實現(xiàn)
這篇文章主要介紹了nginx 代理80端口轉(zhuǎn)443端口的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09Nginx禁止國外IP訪問我的網(wǎng)站的實現(xiàn)
本文主要介紹了Nginx禁止國外IP訪問我的網(wǎng)站的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07nginx proxy_pass反向代理配置中url后加不加/的區(qū)別介紹
這篇文章主要給大家介紹了關(guān)于nginx proxy_pass反向代理配置中url后加不加/的區(qū)別,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11通過瀏覽器查看nginx服務(wù)器狀態(tài)配置方法
這篇文章主要介紹了通過瀏覽器查看nginx服務(wù)器狀態(tài)配置方法,本文講解開啟nginx-status的配置方法,并對服務(wù)器的參數(shù)做了詳細講解,需要的朋友可以參考下2015-04-04