一个域名nginx配置多个vue项目

在已有项目一的情况下，不改变项目一的访问地址，在同一域名的二级目录下部署项目二，配置如下：

一、修改vue.js配置

1. 修改vue-router路由配置 src/router/index.js文件

a. 项目一

const router = new VueRouter({
  mode: 'history',
  routes: routes
})

b. 项目二

const router = new VueRouter({
  base: 'jx',
  mode: 'history',
  routes: routes
})

注意图中标记：

2.注意webpack打包配置 config/index.js

a. 项目一

assetsSubDirectory: 'static',
assetsPublicPath: '/',

b. 项目二

assetsSubDirectory: 'static',
assetsPublicPath: '/jx/',

注意图中标记：

二、nginx配置

1. nginx-1.15.5\conf\nginx.conf 文件的server配置如下：

# 一个域名下多个Vue.js项目的nginx配置
server {
        listen      8001;
        server_name  localhost;
		
		# 项目一
        location / {
	        root C:/adanhuan/cy-project/cycxvux/cy;
            try_files $uri $uri/ @router;
            index  index.html  index.htm;
        }
		
		location @router {
		    rewrite ^.*$  /index.html last;
		}
		
		# 项目二
		location /jx {
			alias C:/adanhuan/cy-project/cycxvux/jx; 
			try_files $uri $uri/ @router_jx;
			index  index.html  index.htm;	
		}
		
		location @router_jx {
		    rewrite ^.*$  /jx/index.html last;
		}
		
		# 接口请求代理,解决跨域
		location /api { 
			proxy_pass http://h5cs.cycxvip.com;
		}

 location /api {        //匹配url中带有api的，并转发到http://localhost:8080/api
  rewrite  ^/api/(.*)$ /$1 break;         //利用正则进行匹配
  proxy_pass http://localhost:8080;      //转发的参数设定
}
    }

注意图中标记(容易踩坑)：

三、重启nginx后,项目访问地址如下：

项目一：http://localhost:8001/
项目二：http://localhost:8001/jx/