一、前言

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

比如 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 访问

首先我们先正常(通过端口来区分)发布一个 vue 项目

server {
        # 端口
        listen       8091; 
        server_name  localhost;
        # 项目文件路径
        root         E:\HTML\xljkzx\phone;

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

    }

在 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

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

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

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

打包后静态资源加载正常

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

vue 配置路由加前缀

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

export default new Router({
base: '/xljkzx/phone/',
mode: "history",//去除哈希值的#号
routes: routers,
});

介绍碰到的一个问题

在刚开始查资料时，发现有人使用 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

一个端口区分多个 vue