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

本贴最后更新于 1441 天前,其中的信息可能已经时异事殊

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 ;
		}

    }
  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

clipboard.png

clipboard1.png

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

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

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

clipboard2.png
打包后静态资源加载正常

clipboard3.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

  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    266 引用 • 666 回帖
  • 发布
    5 引用 • 3 回帖
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    312 引用 • 546 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...