快捷導(dǎo)航

使用nginx實(shí)現(xiàn)一個(gè)端口和ip訪問多個(gè)vue前端的全過程

更新時(shí)間：2024年09月27日 10:09:35 作者：氣拔星

為滿足單端口訪問多個(gè)前端應(yīng)用的需求,需要對(duì)nginx進(jìn)行配置,同時(shí)修改vue項(xiàng)目的publicPath參數(shù),這篇文章主要介紹了使用nginx實(shí)現(xiàn)一個(gè)端口和ip訪問多個(gè)vue前端的相關(guān)資料,需要的朋友可以參考下

1、nginx配置

server {
        listen       80;
        server_name  localhost;
        charset utf-8;
        
        # 配置默認(rèn)訪問前端
        location / {
            root /usr/local/html/project1/dist/;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        
        # 項(xiàng)目2前端
        location /project2{
            alias /usr/local/html/project2/dist/;
            index index.html;
            try_files $uri $uri/ /project2/index.html;
        }

        # 項(xiàng)目1前端
        location /project1{
            alias /usr/local/html/project1/dist/;
            index index.html;
            try_files $uri $uri/ /project1/index.html;
        }

        # 項(xiàng)目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/;
        }

        # 項(xiàng)目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前端代碼修改

兩個(gè)項(xiàng)目的vue代碼均要修改

修改文件：在項(xiàng)目根目錄：.env.production

# 頁面標(biāo)題
VUE_APP_TITLE = 某某平臺(tái)

# 生產(chǎn)環(huán)境配置
ENV = 'production'

# 生產(chǎn)環(huán)境
VUE_APP_BASE_API = '/project1-prod-api'

在項(xiàng)目根目錄：vue.config.js

修改publicPath參數(shù)

3、驗(yàn)證修改

重新打包構(gòu)建vue前端代碼，修改nginx配置，并重啟nginx，防火墻允許nginx配置的端口。

總結(jié)

到此這篇關(guān)于使用nginx實(shí)現(xiàn)一個(gè)端口和ip訪問多個(gè)vue前端的文章就介紹到這了,更多相關(guān)nginx一個(gè)端口和ip訪問多個(gè)vue內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: