在已有项目一的情况下,不改变项目一的访问地址,在同一域名的二级目录下部署项目二,配置如下:
一、修改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
})
注意图中标记:
image2.注意webpack打包配置 config/index.js
a. 项目一
assetsSubDirectory: 'static',
assetsPublicPath: '/',
b. 项目二
assetsSubDirectory: 'static',
assetsPublicPath: '/jx/',
注意图中标记:
image二、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; //转发的参数设定
}
}
注意图中标记(容易踩坑):
image三、重启nginx后,项目访问地址如下:
项目一:http://localhost:8001/
项目二:http://localhost:8001/jx/
作者:吖蛋黄
链接:https://www.jianshu.com/p/7169a2eb015b
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
网友评论