使用nginx實現(xiàn)一個端口和ip訪問多個vue前端的全過程
更新時間：2024年09月27日 10:09:35 作者：氣拔星
為滿足單端口訪問多個前端應(yīng)用的需求,需要對nginx進行配置,同時修改vue項目的publicPath參數(shù),這篇文章主要介紹了使用nginx實現(xiàn)一個端口和ip訪問多個vue前端的相關(guān)資料,需要的朋友可以參考下
前言：由于安全組要求，前端頁面只開放一個端口，但是項目有多個前端，此前一直使用的是一個前端使用單獨一個端口進行訪問，現(xiàn)在需要調(diào)整。
需要實現(xiàn)：這里以80端口為例，兩個前端分別是：project1，project2。
例如：訪問項目1：192.168.1.10:80/project1
訪問項目2：192.168.1.10:80/project2
需要的配置：1、nginx配置；2、vue前端代碼修改
1、nginx配置
server {
listen 80;
server_name localhost;
charset utf-8;
# 配置默認訪問前端
location / {
root /usr/local/html/project1/dist/;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
# 項目2前端
location /project2{
alias /usr/local/html/project2/dist/;
index index.html;
try_files $uri $uri/ /project2/index.html;
}
# 項目1前端
location /project1{
alias /usr/local/html/project1/dist/;
index index.html;
try_files $uri $uri/ /project1/index.html;
}
# 項目1-api接口地址代理
location /project1-prod-api/ {
if ($request_method = OPTIONS ) {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
add_header Access-Control-Allow-Headers *;
return 200;
}
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_buffer_size 128k;
proxy_buffers 32 32k;
proxy_busy_buffers_size 128k;
proxy_pass http://192.168.1.10:8080/;
}
# 項目2-api接口地址代理
location /project2-prod-api/ {
if ($request_method = OPTIONS ) {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;
add_header Access-Control-Allow-Headers *;
return 200;
}
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_buffer_size 128k;
proxy_buffers 32 32k;
proxy_busy_buffers_size 128k;
proxy_pass http://192.168.1.10:8081/;
}
}2、vue前端代碼修改
兩個項目的vue代碼均要修改
修改文件：在項目根目錄：.env.production
# 頁面標題 VUE_APP_TITLE = 某某平臺 # 生產(chǎn)環(huán)境配置 ENV = 'production' # 生產(chǎn)環(huán)境 VUE_APP_BASE_API = '/project1-prod-api'
在項目根目錄：vue.config.js
修改publicPath參數(shù)
3、驗證修改
重新打包構(gòu)建vue前端代碼，修改nginx配置，并重啟nginx，防火墻允許nginx配置的端口。
總結(jié)
到此這篇關(guān)于使用nginx實現(xiàn)一個端口和ip訪問多個vue前端的文章就介紹到這了,更多相關(guān)nginx一個端口和ip訪問多個vue內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了讓Nginx支持shtml格式的配置方法,shtml格式可以包含一些服務(wù)端指令,同PHP中的include功能類似,需要的朋友可以參考下2014-08-08
在使用Nginx作為反向代理將iServer的HTTP協(xié)議轉(zhuǎn)換為HTTPS協(xié)議時,可能會遇到靜態(tài)資源無法加載、頁面跳轉(zhuǎn)回HTTP協(xié)議、訪問服務(wù)管理界面權(quán)限問題等情況,本文給大家介紹解決Nginx轉(zhuǎn)發(fā)圖片不能顯示的問題,感興趣的朋友一起看看吧2024-11-11
想讓Nginx支持中文文件名首先得讓你的系統(tǒng)有中語語言包,設(shè)置前可以執(zhí)行：locale 看一下，如果顯示是en_US.UTF-8，即是正常，不用按下面的步驟設(shè)置2013-06-06
這篇文章主要介紹了nacos集群搭建Nginx負載均衡的詳細操作,文中通過代碼示例和圖文介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Nginx 負載均衡是什么以及該如何配置，幫助大家更好的理解和使用Nginx服務(wù)器，感興趣的朋友可以了解下2021-01-01
nginx配置域名訪問時域名后出現(xiàn)兩個斜杠//的解決方法
最近這兩天重新寫了一下我的個人網(wǎng)站，在阿里云新買了一臺服務(wù)器，配置好以后出現(xiàn)了一個問題，就是輸入域名后域名地址會自動在后面追加兩個斜桿,需要的朋友可以參考下2020-07-07
Nginx是一種高性能的Web服務(wù)器軟件,其中root和alias是用于配置資源位置的兩個指令,root指令用于設(shè)置資源的根目錄,而alias指令則為特定location設(shè)置路徑別名,root適用于整體目錄結(jié)構(gòu),alias適合細粒度路徑控制,本文詳解這兩個指令的用途及區(qū)別2024-10-10
這篇文章主要介紹了Nginx 的多站點配置方案,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了Nginx限流和黑名單配置,Nginx的限流主要是兩種方式，限制訪問頻率和限制并發(fā)連接數(shù)，Nginx?按請求速率限速模塊使用的是漏桶算法，即能夠強行保證請求的實時處理速度不會超過設(shè)置的閾值，感興趣的朋友跟隨小編一起看看吧2022-05-05
nginx開啟HSTS讓瀏覽器強制跳轉(zhuǎn)HTTPS訪問詳解
這篇文章主要介紹了nginx開啟HSTS讓瀏覽器強制跳轉(zhuǎn)HTTPS訪問詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05