ViteJS资源处理问题：开发环境下CSS URL未重写且主机目标错误

核心问题：Vite dev模式下base选项不生效的原因 #

Vite的base配置在开发模式下仅作用于路径前缀，而非完整的资源URL主机地址。你需要让Vite生成的所有静态资源（包括字体文件）都带上http://localhost:3000的完整地址，这得靠server.origin配置实现。

具体解决方案 #

1. 配置server.origin强制生成带主机的资源URL #

修改你的vite.config.js，添加server.origin配置：

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    port: 3000,
    origin: 'http://localhost:3000' // 关键配置，让所有资源URL带上完整主机地址
  },
  // 你的其他配置...
})

这个配置会让Vite在处理所有静态资源（包括@font-face中的字体文件路径）时，自动拼接完整的http://localhost:3000前缀，确保请求目标主机正确。

2. 确保node_modules资源被正确解析 #

如果fontsource的CSS文件位于node_modules中，Vite默认会处理其资源路径，但可以通过优化依赖配置确保解析更稳定：

export default defineConfig({
  // ...其他配置
  optimizeDeps: {
    include: ['fontsource-你的字体包名'] // 比如fontsource-roboto
  }
})

3. 验证效果 #

重启Vite dev服务后，打开浏览器开发者工具的网络面板，查看字体文件的请求URL：

• 正确的URL应该是http://localhost:3000/xxx.woff
• 若仍指向localhost:8080，检查是否有浏览器缓存，清空缓存后重试

4. 跨域问题补充（若后续遇到） #

由于Java后端和Vite服务分属不同端口，可能出现跨域请求被拦截的情况。此时可以在Vite中配置代理转发，或者在Java后端添加CORS响应头：

• Vite代理配置示例：

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true
    }
  }
}

内容的提问来源于stack exchange，提问作者Manu