如何在Vite应用中访问base配置以修正资源路径？

当然有，Vite提供了内置的方式获取base配置，完全不用硬编码路径，下面是两种最常用的方法：

• 在Vue组件/JS/TS代码中使用import.meta.env.BASE_URL
  这是Vite自动注入的环境变量，会直接对应你在vite.config.js里设置的base值。把你的图片标签改成动态绑定路径即可：

  <img :src="import.meta.env.BASE_URL + 'foobar.jpg'" />
  

  这样不管你后续把base改成什么值，路径都会自动拼接正确，不用手动修改每一处引用。如果是TypeScript项目，确保你的vite-env.d.ts文件里有/// <reference types="vite/client" />声明，这样能获得类型提示。

• 在HTML文件中使用%BASE_URL%占位符
  如果是在public/index.html这类入口HTML里引用public目录的资源，可以直接用这个占位符，Vite会在构建时自动替换成配置的base路径：

  <img src="%BASE_URL%foobar.jpg" />
  

另外补充一个小建议：如果你的资源不是必须放在public目录里，可以把图片移到src/assets下，然后通过ES模块导入的方式引用：

<script setup>
import foobarImg from './assets/foobar.jpg'
</script>

<template>
  <img :src="foobarImg" />
</template>

这种方式Vite会自动处理资源路径，包括适配base配置，同时还能享受Vite的资源优化（比如图片压缩、按需加载等）。

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