一、前言

以前发布项目都是使用端口不同来区分多个项目、现在老板要求只使用一个端口、通过前缀不同来区分多个项目。

比如 localhost/admin 访问的后台管理项目 , localhost/phone 访问的是移动端业务项目

听到这个需求时,自然而然的想到了 nginx 的反向代理功能。

二、nginx 反向代理

反向代理,其实客户端对代理是无感知的,因为客户端不需要任何配置就可以访问,我们只需要将请求发送到反向代理服务器,由反向代理服务器去选择目标服务器获取数据后,在返回给客户端,此时反向代理服务器和目标服务器对外就是一个服务器,暴露的是代理服务器地址,隐藏了真实服务器 IP 地址。

在 nginx 中使用 proxy_pass 来配置反向代理。

server {
    # 端口
        listen       8090; 
        server_name  localhost;

    # 反向代理到 java后台
        location /api/xljkzx/ {
            proxy_pass http://127.0.0.1:9023/;
        }
    }

上面配置会让你访问 localhost:8090/api/xljkzx/auth 时访问到http://127.0.0.1:9023/auth

三、反向代理 Vue 项目上面的配置让我已经配置好了后台接口的 API 访问

  1. 首先我们先正常(通过端口来区分)发布一个 vue 项目
server {
        # 端口
        listen       8091; 
        server_name  localhost;
        # 项目文件路径
        root         E:\HTML\xljkzx\phone;

        location / {
            try_files $uri $uri/ /index.html ;
        }

    }
  1. 在 8090 端口里面配置反向代理,配置如下
server {
        # 端口
        listen       8091; 
        server_name  localhost;
        # 项目文件路径
        root         E:\HTML\xljkzx\phone;

        location / {
            try_files $uri $uri/ /index.html ;
        }

    }

然后访问 http://localhost:8090/xljkzx/phone 试下效果,发现静态资源(css、js) 都报 404

clipboard1-0b4086aa.png

发现静态资源的路径并没有加上前缀 /xljkzx/phone/

  1. vue 配置打包时静态资源加上前缀

将 assetsPublicPath 的 / 改成需要的前缀 ,我这里是 /xljkzx/phone/

clipboard2-23b99ee3.png

打包后静态资源加载正常

clipboard3-16826970.png

后面测试又发现路由跳转失效。

  1. vue 配置路由加前缀

这个只需要在 new Router 时加上 base 属性 。如下

export default new Router({
base: '/xljkzx/phone/',
mode: "history",//去除哈希值的#号
routes: routers,
});
  1. 介绍碰到的一个问题

在刚开始查资料时,发现有人使用 alias 来发布多个站点,如下配置

server {
        # 端口
        listen       8090; 
        server_name  localhost;

        # 这里配置一下
        location /api/xljkzx/ {
            proxy_pass http://127.0.0.1:9023/;
        }
        # 手机端站点
        location /xljkzx/phone {
            alias E:\HTML\xljkzx\phone;
            try_files $uri $uri/ /index.html ;
        }

    }

这里发现该种配置无法使用 vue 的路由,访问路由时会报 404,只能访问到 index

最后修改:2021 年 01 月 24 日 08 : 46 PM
如果觉得我的文章对你有用,请随意赞赏