Nginx同一个端口部署多个vue项目

先看效果

app1

浏览器输入192.168.66.66:10000/app1 访问app1

app2

浏览器输入192.168.66.66:10000/app2 访问app2

配置方法

1. 前台代码更改3个地方
	- 发网络请求的路径加固定前缀， 如：testurl #注意如果还在开发阶段，需要更改vue.config.js的代理配置
	- 前端路由base固定前缀路径 app1
	- 前端项目的虚拟项目名  app1
	# 注意：路由固定路径和虚拟项目名必须一致
	
2. 配置 nginx   网络请求的转发    前台地址重定向

示例1

---

1. src\libs\api.request.js 改网络请求统一前缀

2. vue.config.js 配置开发时代理

3. src\router\index.js 改路由base固定前缀

4. vue.config.js 配置前端虚拟项目名

---

1. 前台代码更改配置

1. src\libs\api.request.js 改网络请求统一前缀 testurl

const baseUrl = '/testurl'

2. vue.config.js 配置开发时代理,保证开发时也能正确访问到后台 testurl

devServer: {
    proxy: {
      '/testurl/api': {
        target: 'http://10.111.43.12:8090/',
        pathRewrite: { '^/testurl/api': '/' }
      }
    }
  }

3. src\router\index.js 改路由base固定前缀 app1

Vue.use(Router)
const router = new Router({
  base: 'app1',
  routes,
  mode: 'history'
})

4. vue.config.js 配置前端虚拟项目名 /app1/

const BASE_URL = '/app1/'

publicPath: BASE_URL,

2. nginx 配置

server {
        listen       10000;
        server_name  localhost;

        add_header                  Set-Cookie "HttpOnly";
        add_header                  Set-Cookie "Secure";
        add_header                  X-Frame-Options "SAMEORIGIN";

        #此配置可省略，仅仅是为了输入10.111.43.12:10000 时有个默认首页        
        location / {
            root html/;
            index index.htm index.html;
        }
        # 前台页面重定向 ,不能配置root alias ;记得把dist下的内容外移一层
        location ^~ /app1/ {
            try_files $uri $uri/ /app1/dist/index.html;
        }
        location ^~ /app2/ {
            try_files $uri $uri/ /app2/dist/index.html;
        }

        # 网络配置转发到网关
        location /cxyxcwdzurl/api/ {
            proxy_pass http://localhost:8090/;

            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

    }

3. 服务器前台打包放置路径

html下面建立app1文件夹，将打包好的dist.zip 解压到app1下面

最最最重要的是：必须把dist目录下的内容拷贝到 app1目录，否则访问报错forbidden

cd /usr/local/nginx/html/app1
cp -r dist/*  ./

app2部署方式，和app1类似，触类旁通，聪明的你，肯定已经学会了！

脚下留心

我也是摸石头过河，一个一个坑踩过来的，用了最最简陋的配置办法进行配置；

如有其他优化配置办法，期待您的分享。[email protected]