Vue3+Vite应用部署于子目录时如何自动替换图片路径？

方案一：配置 Vite 的 base 选项 #

这是最直接的解决方案，无需手动拼接路径。在项目根目录的 vite.config.js 中设置 base 字段：

export default {
  base: '/myapp/' // 对应你的子目录路径
}

配置完成后，Vite 在构建时会自动为所有资源路径（包括图片、JS、CSS 等）添加 /myapp/ 前缀。你在组件模板里直接使用相对路径即可：

<img src="/img/undraw_profile.svg">

开发环境下，Vite 会自动适配路径，完全不影响本地调试。

方案二：用环境变量统一管理路径 #

如果需要根据不同环境切换 base 路径（比如开发、测试、生产环境用不同子目录），可以用 Vite 的环境变量替代 vue-cli 的 process.env：

1. 在项目根目录创建 .env.production（生产环境）或 .env（通用环境）文件，添加：

VITE_APP_BASE_PATH=/myapp/

2. 在组件中直接引用该变量：

<img :src="import.meta.env.VITE_APP_BASE_PATH + 'img/undraw_profile.svg'">

方案三：配置路径别名简化引用（可选） #

如果图片目录层级较深，还可以通过别名进一步简化路径：
在 vite.config.js 中添加别名配置：

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  base: '/myapp/',
  resolve: {
    alias: {
      '@img': path.resolve(__dirname, 'src/assets/img')
    }
  }
})

之后在组件里直接使用别名引用图片：

<img src="@img/undraw_profile.svg">

Vite 会自动解析别名并加上配置好的 base 前缀。

内容的提问来源于stack exchange，提问作者Jean François Manatane