Vite图片路径改为相对路径设置方法

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《Vite 构建图片路径改为相对路径配置方法》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

Vite 默认将静态资源路径设为绝对根路径（如 `/assets/photo.svg`），导致非根目录部署时图片无法加载；通过配置 `vite.config.js` 中的 `base: './'`，可强制所有资源使用相对路径，无需修改组件代码。

在 Vite 项目中，构建后生成的 HTML 和 JS 文件会引用静态资源（如 SVG、PNG 等）时，默认采用以 / 开头的绝对路径（例如 ）。该行为适用于部署在域名根路径（如 https://example.com/）的场景，但当应用需部署在子路径下（如 https://example.com/my-app/ 或本地测试服务器的 http://localhost:8080/subdir/）时，浏览器会错误地尝试从根目录请求资源（即 https://example.com/assets/photo.svg），而非相对子路径（https://example.com/my-app/assets/photo.svg），从而导致图片 404。

解决此问题最简洁、全局生效的方式是：在 vite.config.js 中显式设置 base 选项为相对路径 './'。该配置会作用于所有由 Vite 处理的资源 URL（包括 HTML 中的 、CSS 中的 url()、JS 中的动态导入等），确保构建产物中所有资源引用均以 ./ 开头，实现真正的路径可移植性。

✅ 正确配置示例（vite.config.js）：

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

export default defineConfig({
  plugins: [react()],
  base: './', // ? 关键配置：启用相对路径基准
})

⚠️ 注意事项：

• base: './' 仅影响构建（vite build）输出，开发服务器（vite dev）仍使用内存服务，不受影响；
• 若后续需部署到固定子路径（如 /my-app/），也可设为 base: '/my-app/'，此时资源路径将自动前缀化（如 /my-app/assets/photo.svg），但需确保服务器正确配置路由回退；
• 此配置无需改动任何 React 组件（如内部 的写法），完全解耦，符合“零侵入”优化原则；
• 配置后请务必执行完整构建（npm run build）并检查 dist/index.html 中的资源路径是否已变为 ./assets/photo.svg，以验证生效。

总结：base: './' 是 Vite 官方推荐的、轻量且可靠的跨环境资源路径方案，特别适合 CI/CD 多环境部署或嵌入式子应用场景。

今天关于《Vite图片路径改为相对路径设置方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！