在日常的开发工作中，我们经常遇需要把多个项目和服务部署在同一个域名下，然后使用nginx进行代理转发，例如：

• 接口服务：a.com/api, 接口服务对应Java或PHP后台应用
• 首页服务前端工程：a.com , 前端服务使用Vue编写
• 后台服务前端工程：a.com/system，管理后台服务使用Vue编写，使用二级目录system

因项目都需要部署在同一个域名，我们vue需要坐如何设置才能满足要求？

了解vue-cli

在vue的项目中，我们的项目编译和构建依赖于构建编译工具，所以我们需要对当前项目的cli版本或vite版本有所了解并到官网查看对应的API和配置说明：

vue-cli 方式

第一步,我们需要在vue.config.js文件中新增publicPath配置项，具体的参数说明如下：

更多说明查看官网说明： vue-cli官网介绍

建议实际项目中使用条件式参数，或者在配置文件中设置值,参考代码如下：

const vueConfig = {
    publicPath: process.env.NODE_ENV === 'production' ? '/system/' : '/',
}

第二步，修改路由配置，

const createRouter = () =>
  new Router({
    mode: process.env.NODE_ENV === 'production' ? 'history' : 'hash',// 路由访问模式，可选参数，如果试history，则nginx需要做额外的配置
    base: process.env.NODE_ENV === 'production' ? '/system/' : '/',// 访问基础路径，重要设置
    routes: routerMap // 你的路由配置
  })

const router = createRouter()

export default router

第三步修改nginx配置信息：
当我们的路由使用history模式访问时，需对配置进行修改

server {
        listen        80;
        server_name  a.com;
        root   /home/projectWork; #项目根目录

        #后台服务
        location /system {
            index  index.html;
            try_files $uri $uri/ /system/index.html; #重要，vue项目解决刷新后404问题，配置项为重试查找别的文件，具体配置请自行百度"nginx try_files"
            alias /home/projectWork/system;
        }
        # 接口服务
        location /api {
            proxy_pass http://127.0.0.1:8501;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_hide_header X-Powered-By;
            proxy_set_header Upgrade $http_upgrade;
             proxy_set_header Connection "Upgrade";

        }
        
}

至此我们把system项目打包编译后的文件放到网站本目录下的system目录下，使用路径a.com/system 访问即可访问到我们的服务.