nginx 单端口通过前缀来区分多个 vue 项目

nginx 单端口通过前缀来区分多个 vue 项目

一、前言

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

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

上面的配置让我已经配置好了后台接口的 api 访问

三、反向代理 Vue 项目

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

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

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

    }

2. 在 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/

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

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

打包后静态资源加载正常

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

4. vue 配置路由加前缀

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

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

5. 介绍碰到的一个问题

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