nginx配置同一域名同一端口下部署多个vue项目

问题：

默认端口就只有一个，有多个项目需要部署到同一端口下。

解决方法：

根据根路径不同分别代理访问不同项目

第一步：

在vue.config.js文件中修改publicPath路径为/project/

......
module.exports = {
  // 部署生产环境和开发环境下的URL。
  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
  // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
  publicPath: "/project/",
  // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
  outputDir: 'dist',
  // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
  assetsDir: 'static',
  ......
}

第二步：

在router文件夹中index.js文件中修改base为 ‘/project/’

... ...
const createRouter = () => new Router({
  base: '/project/', // 调整这里，路径跟publicPath保持一致即可
  mode: 'history',   // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: routers 
})

打包

调整完毕后，直接执行build打包命令，可以发现index.html引入js路径增加了/project

... ...
<script type="text/javascript" src="/project/static/js/chunk-vendors.js"></script>
<script type="text/javascript" src="/project/static/js/app.js"></script>
... ...

调整nginx的server配置

server {
    listen       9001;
    server_name  localhost;
	# 这个是第一个vue项目 页面访问地址 http://ip:9001
    location / {
    	 # root  F:/parant/dist;
         root   /home/project/dist/;
         index  index.html;
         try_files $uri $uri/ /index.html;
    }
    # 这个是第二个vue项目 页面访问地址 http://ip:9001/project
    location  /project {
    	 # alias  F:/subparant/dist;
         alias   /home/other_project/dist/;
         index   index.html;
         try_files $uri $uri/ /project/index.html;	#解决刷新404
    }
}

注意：
如果页面中有二级路由的话，配置文件中一定不能用root，要用alias.