前端如何将两个分离项目合并发布到一个端口

前端如何将两个分离项目合并发布到一个端口

我在开发过程中遇到将前台和后台分离的项目部署到一个端口的问题，在网上找了很久都没有答案，最终通过查找webpack文档才得以解决，其实这个问题是比较简单的。

我的项目使用的是Vue3框架:

1. 配置Webpack配置文件, Vue里面是vue.config.js
   1. 后台配置:

      module.exports = defineConfig({
          publicPath: "/admin/",
      })
      

   2. 前台配置:

      module.exports = defineConfig({
              publicPath: "/admin/",
      })
      

2. 配置nginx文件:

   server {
       listen       80;
       server_name  localhost;
   
       client_max_body_size        100m;
       client_body_buffer_size     128k;
       proxy_connect_timeout       5;
       proxy_send_timeout          1800;
       proxy_read_timeout          1800;
       proxy_buffer_size           4k;
       proxy_buffers               4 32k;
       proxy_busy_buffers_size     64k;
       proxy_temp_file_write_size  64k;
       auth_basic "status";
   
       # 后台路由
       location /admin {
           root   /usr/share/nginx/html/release;
           index  index.html index.htm;
           try_files $uri $uri/ /admin/index.html;
       }
       # 配置api代理
       location /v1 {
           rewrite ^/v1/(.*)$ /$1 break;
           proxy_pass http://admin:8888;
       }
       # 静态资源路径
       location ~ \/uploads\/.*\.(gif|jpg|png|bmp|pdf)$ {
           root /data;
       }
       # 配置前台路由
       location / {
           root   /usr/share/nginx/html/release/portal;
           index  index.html index.htm;
           try_files $uri $uri/ /portal/index.html;  #VUE项目，配置路由（必须）
       }
   }
   

3. Vue Router配置:
   1. 后台配置:

      export default createRouter({
          history: createWebHistory("/admin"),
          routes
      })
      

   2. 前台配置:

      export default createRouter({
          history: createWebHistory("/"),
          routes
      })
      

完成! 其实主要还是不太熟悉webpack