nginx配置同一域名同一端口下部署多個(gè)vue項(xiàng)目
更新時(shí)間：2024年06月03日 10:56:03 作者：strggle_bin
本文主要介紹了nginx配置同一域名同一端口下部署多個(gè)vue項(xiàng)目,可以根據(jù)根路徑不同分別代理訪問(wèn)不同項(xiàng)目,具有一定的參考價(jià)值,感興趣的可以了解一下
問(wèn)題：
默認(rèn)端口就只有一個(gè)，有多個(gè)項(xiàng)目需要部署到同一端口下。
解決方法：
根據(jù)根路徑不同分別代理訪問(wèn)不同項(xiàng)目
第一步：
在vue.config.js文件中修改publicPath路徑為/project/
......
module.exports = {
// 部署生產(chǎn)環(huán)境和開(kāi)發(fā)環(huán)境下的URL。
// 默認(rèn)情況下，Vue CLI 會(huì)假設(shè)你的應(yīng)用是被部署在一個(gè)域名的根路徑上
// 例如 https://www.ruoyi.vip/。如果應(yīng)用被部署在一個(gè)子路徑上，你就需要用這個(gè)選項(xiàng)指定這個(gè)子路徑。例如，如果你的應(yīng)用被部署在 https://www.ruoyi.vip/admin/，則設(shè)置 baseUrl 為 /admin/。
publicPath: "/project/",
// 在npm run build 或 yarn build 時(shí) ，生成文件的目錄名稱(chēng)（要和baseUrl的生產(chǎn)環(huán)境路徑一致）（默認(rèn)dist）
outputDir: 'dist',
// 用于放置生成的靜態(tài)資源 (js、css、img、fonts) 的；（項(xiàng)目打包之后，靜態(tài)資源會(huì)放在這個(gè)文件夾下）
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;
# 這個(gè)是第一個(gè)vue項(xiàng)目 頁(yè)面訪問(wèn)地址 http://ip:9001
location / {
# root F:/parant/dist;
root /home/project/dist/;
index index.html;
try_files $uri $uri/ /index.html;
}
# 這個(gè)是第二個(gè)vue項(xiàng)目 頁(yè)面訪問(wèn)地址 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
}
}
注意：如果頁(yè)面中有二級(jí)路由的話，配置文件中一定不能用root，要用alias.
到此這篇關(guān)于nginx配置同一域名同一端口下部署多個(gè)vue項(xiàng)目的文章就介紹到這了,更多相關(guān)nginx部署多vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Nginx反向代理中出現(xiàn)502錯(cuò)誤的解決步驟
反向代理是一種服務(wù)器代理的方式,它代理了客戶(hù)端的請(qǐng)求并將請(qǐng)求轉(zhuǎn)發(fā)給后端服務(wù)器,然后將后端服務(wù)器的響應(yīng)返回給客戶(hù)端,但經(jīng)常會(huì)遇到502錯(cuò)誤,所以本文給大家介紹了Nginx反向代理中出現(xiàn)502錯(cuò)誤的解決步驟,需要的朋友可以參考下2025-03-03
centos環(huán)境下nginx高可用集群的搭建指南
為了防止Nginx單點(diǎn)故障造成服務(wù)器癱瘓,本文介紹了Nginx實(shí)現(xiàn)高可用集群構(gòu)建,下面這篇文章主要給大家介紹了關(guān)于centos環(huán)境下nginx高可用集群的搭建指南,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
nginx 代理80端口轉(zhuǎn)443端口的實(shí)現(xiàn)
這篇文章主要介紹了nginx 代理80端口轉(zhuǎn)443端口的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
這篇文章主要介紹了制作nginx的RPM包的方法,需要的朋友可以參考下2014-07-07
這篇文章主要給大家介紹了關(guān)于如何利用Nginx防止IP地址被惡意解析的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Nginx具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
今天小編就為大家分享一篇關(guān)于nginx proxy_cache批量清除緩存的腳本介紹，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-02-02
Windows nginx安裝教程及簡(jiǎn)單實(shí)踐
這篇文章主要介紹了Windows nginx安裝教程及簡(jiǎn)單實(shí)踐的相關(guān)資料,需要的朋友可以參考下2016-10-10
Nginx禁止國(guó)外IP訪問(wèn)我的網(wǎng)站的實(shí)現(xiàn)
本文主要介紹了Nginx禁止國(guó)外IP訪問(wèn)我的網(wǎng)站的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
nginx proxy_pass反向代理配置中url后加不加/的區(qū)別介紹
這篇文章主要給大家介紹了關(guān)于nginx proxy_pass反向代理配置中url后加不加/的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
通過(guò)瀏覽器查看nginx服務(wù)器狀態(tài)配置方法
這篇文章主要介紹了通過(guò)瀏覽器查看nginx服務(wù)器狀態(tài)配置方法,本文講解開(kāi)啟nginx-status的配置方法,并對(duì)服務(wù)器的參數(shù)做了詳細(xì)講解,需要的朋友可以參考下2015-04-04