nginx配置两个基于若依的前后端分离的前端项目

1、其中一个按着正常逻辑进行打包前端项目，默认是dist目录下。然后上传到服务器的/data/zs的目录下。

2、另外一个的部署相对来麻烦一些。

2.1、首先修改vue.config.js，将publisPath的值改成如下图，其中second为访问带有的模块名。

publicPath: process.env.NODE_ENV === "production" ? "/second/" : "/",
  // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
outputDir: 'second',

2.2、修改router下的index内容如下图，主要是在base中加上/second/和上面保持一致。

export default new Router({
  base:'/second/',
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

2.3、修改完后进行项目打包，然后放到/data/second。

3、服务器端nginx配置,两个前端项目同时读一个后台的地址。

location / {
	 root /data/zs/dist;
     try_files $uri $uri/ /index.html;
     index  index.html index.htm;
}
location ^~/second {
	 alias /data/second/;
     try_files $uri $uri/ /index.html;
}
location ~ ^/prod-api/(.*) {
     proxy_pass http://127.0.0.1:9092/$1?$query_string;
     proxy_set_header Host $http_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;
	 proxy_set_header Upgrade $http_upgrade;
     proxy_set_header Connection "upgrade";
}

如果本身有两个域名配置就简单，不需要项目名进行访问，可以都使用第一个的普通的打包部署就可以。