在已有項(xiàng)目一的情況下，不改變項(xiàng)目一的訪問(wèn)地址，在同一域名的二級(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)目訪問(wèn)地址如下：
項(xiàng)目一：http://localhost:8001/
項(xiàng)目二：http://localhost:8001/jx/
