在已有項(xiàng)目一的情況下，不改變項(xiàng)目一的訪問地址，在同一域名的二級(jí)目錄下部署項(xiàng)目二，配置如下：

一、修改vue.js配置

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

a. 項(xiàng)目一

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

b. 項(xiàng)目二

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

image.png

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

a. 項(xiàng)目一

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

b. 項(xiàng)目二

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

image.png

二、nginx配置

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

# 一個(gè)域名下多個(gè)Vue.js項(xiàng)目的nginx配置
server {
        listen      8001;
        server_name  localhost;
        
        # 項(xiàng)目一
        location / {
            root C:/adanhuan/cy-project/cycxvux/cy;
            try_files $uri $uri/ @router;
            index  index.html  index.htm;
        }
        
        location @router {
            rewrite ^.*$  /index.html last;
        }
        
        # 項(xiàng)目二
        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;
        }
        
        # 接口請(qǐng)求代理,解決跨域
        location /api { 
            proxy_pass http://h5cs.cycxvip.com;
        }

 location /api {        //匹配url中帶有api的，并轉(zhuǎn)發(fā)到http://localhost:8080/api
  rewrite  ^/api/(.*)$ /$1 break;         //利用正則進(jìn)行匹配
  proxy_pass http://localhost:8080;      //轉(zhuǎn)發(fā)的參數(shù)設(shè)定
}
    }

nginx.conf.png

三、重啟nginx后,項(xiàng)目訪問地址如下：

項(xiàng)目一：http://localhost:8001/
項(xiàng)目二：http://localhost:8001/jx/