单个域名访问多个前端vue项目

1、修改前端项目配置

修改src/router/index.js文件

export default new Router({
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  base: "/admin/",
  routes: constantRoutes
}

将base设置前端项目的主路径

修改vue.config.js文件

module.exports = {
  // publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
  publicPath: '/admin/',

将publicPath设置为前端项目主路径

2、修改nginx配置文件

server
    {
listen       80;
        server_name  域名;
charset utf-8;
 location / {

            #第一个前端项目默认
             root   /www/wwwroot/项目1路径/dist;
             try_files $uri $uri/ /index.html;
             index  index.html index.htm;
         }

#第二个前端项目设置路径admin
location /admin {

            #第二个前端项目用alias
            alias   /www/wwwroot/项目2路径/dist;

            #第二个前端项目设置路径/admin
            try_files $uri $uri/ /admin/index.html;
            index  index.html index.htm;
        }

location /prod-api/ {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
        #后端IP+端口
        proxy_pass http://ip地址:端口/;

}

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }    

最后实现www.xxx.com访问前端项目1

最后实现www.xxx.com/admin访问前端项目2