Vite Vue3项目多环境图片路径自动配置方案求助

问题背景 #

在Vite Vue3项目中，public文件夹下的静态资源部署到GitHub Pages（仓库名music-playing）时，因配置base: '/music-playing/'适配了生产路径，但本地开发时，模板中的绝对路径会被Vite加上仓库名前缀，导致图片无法加载；手动逐个导入图片虽能解决问题，但操作繁琐，需要一套通用的自动适配方案。

可行解决方案 #

方法1：利用Vite内置环境变量import.meta.env.BASE_URL（推荐） #

Vite自带的import.meta.env.BASE_URL会自动匹配vite.config.js中配置的base值——开发环境返回/，生产环境（如GitHub Pages）返回/music-playing/，无需手动切换。

只需在模板中使用动态样式绑定，用该变量拼接资源路径：

<template>
  <div
    class="music-bg absolute inset-0 box-border h-full w-full bg-contain"
    :style="{ backgroundImage: `url(${import.meta.env.BASE_URL}assets/img/song-header.png)` }"
  />
</template>

这样不管是本地开发、GitHub Pages部署还是VPS部署，路径都会自动适配为当前环境的正确地址。

方法2：全局注入路径变量（适合批量使用场景） #

如果不想在每个模板里重复写import.meta.env.BASE_URL，可以在项目入口全局注册该变量：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
// 全局挂载BASE_URL
app.config.globalProperties.$baseUrl = import.meta.env.BASE_URL
app.mount('#app')

在模板中直接使用全局变量：

<template>
  <div
    class="music-bg absolute inset-0 box-border h-full w-full bg-contain"
    :style="{ backgroundImage: `url(${$baseUrl}assets/img/song-header.png)` }"
  />
</template>

若使用<script setup>语法，需通过getCurrentInstance获取全局变量：

<script setup>
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const baseUrl = proxy?.$baseUrl
</script>

<template>
  <div
    class="music-bg absolute inset-0 box-border h-full w-full bg-contain"
    :style="{ backgroundImage: `url(${baseUrl}assets/img/song-header.png)` }"
  />
</template>

关于@public别名无效的原因 #

Vite对public文件夹的处理逻辑特殊：该目录下的资源不会经过模块解析，会直接被复制到构建产物的根目录，因此别名无法作用于public资源的路径解析。别名仅适用于src目录内的模块导入场景。

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