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

比如 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 项目
首先我们先正常(通过端口来区分)发布一个 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,
        
Vue.js（读音 /vju ː/，类似于 view）是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
        
NGINX 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。