“

在已有項目一的情況下，不改變項目一的訪問地址，在同一域名的二級目錄下部署項目二。配置如下：

”

一、修改vue配置

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;
}
}

2.易踩坑：路由history模式下，在子路徑刷新頁面，出現空頁面。要注意圖中標記：

nginx.conf

三、重啟nginx

重啟nginx，完成！項目訪問地址如下:

項目一：http://localhost:8001/

項目二：http://localhost:8001/jx/

總結

以上是生活随笔為你收集整理的nginx 域名配置_nginx 一个域名配置多个vue项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。