Vite/Vue项目中publicDir与base配置的实践疑问

1. publicDir 的本质与引用逻辑 #

publicDir 指定的是构建时会完整复制到 dist 根目录的资源文件夹，不管你配置的是src/public还是其他相对路径，里面的资源最终都会被放到 dist 的根路径下。

你用<img src='/icon.png' />加载失败的原因是：当配置了base: '/myapp'时，Vite 会把/的基准设为/myapp/，所以根绝对路径的资源需要以/myapp/开头，也就是<img src='/myapp/icon.png' />才会正确指向 dist 下的 icon.png。而你用<img src='icon.png' />是相对路径，开发环境中 Vite 会自动映射到你配置的src/public目录，所以能生效，但生产环境如果页面不在根路径，可能会出现路径错误，建议统一用绝对路径。

2. base 配置的坑点 #

文档说 base 应为带斜杠的绝对路径（如/foo/），但实际使用中推荐不带末尾斜杠的格式（比如/myapp）。Vite 本身支持两种格式，但部分依赖（比如 Pinia、vue-router）对末尾斜杠的处理可能有兼容问题，会导致路径拼接出错，进而引发报错。另外 publicDir 必须用相对路径（不能带开头斜杠），因为它是相对于项目根目录（index.html 所在目录）的路径，带斜杠会被识别为系统绝对路径，Vite 无法正确解析。

3. 正确配置与引用示例 #

正确的 vite.config.ts 配置 #

export default defineConfig({
  base: '/myapp',
  publicDir: 'src/public'
})

资源引用的正确方式 #

• 绝对路径（开发/生产环境通用，推荐）：

  <img src="/myapp/icon.png" />
  

• 相对路径（仅开发环境便捷，生产环境需确保页面路径匹配）：

  <img src="icon.png" />
  

补充说明 #

你之前查阅确认的<root>是 index.html 所在目录的结论是正确的，Vite 文档这里确实描述模糊，没有明确说明，容易造成误解。

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