Vite Rollup构建后图片路径错误，如何无需修改组件调整为相对路径？

直接修改Vite的配置即可实现，无需改动组件代码：

• 修改Vite配置文件（vite.config.js 或 vite.config.ts），调整 base 选项：
  这个配置会让Vite在构建时自动将资源路径从绝对根路径转为相对路径：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    // 开发环境用根路径，生产/测试环境用相对路径
    base: process.env.NODE_ENV === 'production' ? './' : '/'
  })
  

• 如果需要区分测试和生产环境，可以通过环境变量实现：

  1. 创建 .env.test 文件，添加：

     VITE_BASE_URL=./
     

  2. 在Vite配置文件中读取环境变量：

     export default defineConfig({
       plugins: [react()],
       base: import.meta.env.VITE_BASE_URL || '/'
     })
     

  3. 运行测试环境构建时指定模式：

     vite build --mode test
     

配置完成后，构建生成的图片路径会自动变为 ./assets/photo.svg，适配非根目录的测试环境，同时不影响本地localhost的正常运行。

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