自己的项目，遇到了这个问题，绕了很多弯，这里记录一下，以免后面忘记了。
需求:
1.www.test.com 访问的是vueA项目
2.www.test.com/b 访问的是vueB…
3.www.test.com/c 访问的是vueC项目
前端vue的背景，vue2.x + vue cli4 + VueRouter采用history模式
静态服务器：nginx
解决方案1（文件独立）：
1.项目vueA因为是挂在根级，所以它的vue.config中的publicPath采用默认值：“/”,同时在创建router时base也采用默认值“/”
new Router({
base:"/",
mode: "history",
routes: constantRoutes
});
2.项目vueB因为是挂在根级，所以它的vue.config中的publicPath采用默认值：“/b/”,同时在创建router时base也采用默认值“/b/”
new Router({
base:process.env.NODE_ENV === "production" ? "/b/" : "/",
mode: "history",
routes: constantRoutes
});
3.项目vueC类似vueB，如上，改成/c/即可
4.修改nginx
server {
listen 80;
server_name www.test.com;
location / {
root d:/dev/vueA/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /b{
alias d:/dev/vueB/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /c{
alias d:/dev/vueC/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location ^~/api/ {
proxy_set_header Host $host;
proxy_headers_hash_max_size 1024;
proxy_headers_hash_bucket_size 128;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for ;
proxy_set_header Accept-Encoding "";
proxy_pass http://100.155.0.105;
}
}
解决方案2（文件嵌套）：
1.如方案1的步骤1
2.如方案1的步骤2
3.如方案1的步骤3
4.在项目vueA的dist目录下分别创建文件夹b和文件c.同时将vueB编译好的dist的中的所有文件拷贝到文件夹b的根目录下，将vueC编译好的dist的中的所有文件拷贝到文件夹c的根目录下，目录结构如下
5.nginx配置（不需要再配置/b 和 /c）
server {
listen 80;
server_name www.test.com;
location / {
root d:/dev/vueA/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location ^~/api/ {
proxy_set_header Host $host;
proxy_headers_hash_max_size 1024;
proxy_headers_hash_bucket_size 128;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for ;
proxy_set_header Accept-Encoding "";
proxy_pass http://100.155.0.105;
}
}
