(标签-后端|关键词-app)

Question

后端application.yml文件代码
server:
  port: 6060
  servlet:
    context-path: /api
spring:
  mvc:
    throw-exception-if-no-handler-found: true
  web:
    resources:
      add-mappings: false
  application:
    name: easygpt
mybatis:
  configuration:
    map-underscore-to-camel-case: true
#接口密钥
api:
  password: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

AI 原始vite.config.js文件
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  server: {
    port: 3001,
    hmr: true,
    proxy: {
      "/ai": {
        target: "http://localhost:6060",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '/api'),
      }
    }
  }
})

论坛原始vite.config.js文件
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    hmr: true,
    port: 3004,
    proxy: {
      "/api": {
        target: "http://localhost:7070",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '/api'),
        pathRewrite: {
          "^api": "/api"
        }
       
      }
      
    }
  },
  build: {
    chunkSizeWarningLimit: 3000,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    },
    chunkFileNames: (chunkInfo) => {
      const facadeModuleId = chunkInfo.facadeModuleId
        ? chunkInfo.facadeModuleId.split('/')
        : [];
      const fileName =
        facadeModuleId[facadeModuleId.length - 2] || '[name]';
      return `js/${fileName}/[name].[hash].js`;
    }
  }
})

怎么去做合并啊，我自己合并的话会404不通

问题代码
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    hmr: true,
    port: 3004,
    proxy: {
      "/api": {
        target: "http://localhost:7070",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '/api'),
        pathRewrite: {
          "^api": "/api"
        }
       
      }, 
      "/api": {
        target: "http://localhost:6060",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '/api'),
      }
    }
  },
  build: {
    chunkSizeWarningLimit: 3000,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    },
    chunkFileNames: (chunkInfo) => {
      const facadeModuleId = chunkInfo.facadeModuleId
        ? chunkInfo.facadeModuleId.split('/')
        : [];
      const fileName =
        facadeModuleId[facadeModuleId.length - 2] || '[name]';
      return `js/${fileName}/[name].[hash].js`;
    }
  }
})

Answer 1

让【宝码香车】来帮你解答，本回答参考DeepSeek编写，并整理提供。
如果还有疑问可以点击头像关注私信或评论。如果答案让您满意，请采纳、点赞、关注，非常感谢！

Vite 配置合并问题分析与解决方案

您遇到的问题是在合并两个 Vite 配置时出现了 404 错误，主要是因为代理配置中存在冲突。以下是详细分析和解决方案：

问题分析

1. 您有两个后端服务：

   • AI 服务运行在 http://localhost:6060，路径前缀为 /ai
   • 论坛服务运行在 http://localhost:7070，路径前缀为 /api

2. 当前合并的问题：

   • 代理配置中使用了相同的 /api 路径前缀，导致冲突
   • rewrite 和 pathRewrite 同时存在可能造成混乱

正确合并方案

以下是修正后的 vite.config.js 文件：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    hmr: true,
    port: 3004,
    proxy: {
      "/ai": {
        target: "http://localhost:6060",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/ai/, '/api') // 将前端请求的/ai转换为后端的/api
      },
      "/api": {
        target: "http://localhost:7070",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '/api') // 保持路径不变
      }
    }
  },
  build: {
    chunkSizeWarningLimit: 3000,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    },
    chunkFileNames: (chunkInfo) => {
      const facadeModuleId = chunkInfo.facadeModuleId
        ? chunkInfo.facadeModuleId.split('/')
        : [];
      const fileName =
        facadeModuleId[facadeModuleId.length - 2] || '[name]';
      return `js/${fileName}/[name].[hash].js`;
    }
  }
})

关键修改点

1. 区分代理路径：

   • 使用 /ai 代理到 AI 服务 (6060 端口)
   • 使用 /api 代理到论坛服务 (7070 端口)

2. 路径重写：

   • AI 服务：将前端请求的 /ai 转换为后端需要的 /api
   • 论坛服务：保持 /api 路径不变

3. 移除冗余配置：

   • 删除了重复的 pathRewrite 配置，使用统一的 rewrite 方式

使用说明

1. 前端请求 AI 服务时，使用 /ai 前缀：

   fetch('/ai/some-endpoint') // 会被代理到 http://localhost:6060/api/some-endpoint
   

2. 前端请求论坛服务时，使用 /api 前缀：

   fetch('/api/some-endpoint') // 会被代理到 http://localhost:7070/api/some-endpoint
   

这样配置后，两个后端服务都能正确接收请求，不会出现 404 错误。