nginx同一域名下部署多个项目

一、我的场景

        因项目业务要求，需增加工作流在线设计器，项目前端架构是vue2版本的，在线设计器是vue3版本的，集成可能会造成兼容问题，所以直接放弃合并，使用跳转的方式进行集成，项目在程序上进行解藕；

二、实现思路

        程序上使用iframe进行后台的无痕跳转，跳转过程中利用模型ID进行关联即可。

三、遇到问题然后分析

        部署至服务器后，跳转至在线流程设计的时候报错，404找不到静态js和css文件。先用F12查看引用的地址，引用的是根路径的地址【 http://192.168.111.15/assets/xxx.css】。这肯定是不对的。以下为nginx.conf的配置

server {

        listen                    80;

        server_name       192.168.111.15;



        location / {

                root        /home/dist/;

                index     index.html  index.htm;

                try_file   $uri  $uri/ index.html;

        }


        location /workFlow {

                root      /home/workflow/;

                index     index.html  index.htm;

                try_file   $uri  $uri/ index.html;

        }

}

  四、如何解决

        我一直以为是nginx的配置问题，于是乎改来改去，还是没改变什么，后来做了个扯蛋蛋的测试，就是把assets文件夹，放到/home/dist/目录下，结果可以访问了，但这也做法也显然不对，继续！在网上继续查询了些关于多个项目部署至同一台nginx的方法，以下这个地址正合我意，原来是vue3中vite.config.js需要配置个base路径，完美解决！

export default defineConfig({
  base: '/workFlow/',
})

https://segmentfault.com/a/1190000045163272https://segmentfault.com/a/1190000045163272