Vite部署至子目录后public资源路径指向根目录，如何解决？

问题原因 #

Vite对public目录下的资源有特殊处理逻辑：默认会将这些资源原封不动复制到构建产物（dist）的根目录，且如果代码里用绝对路径（比如/asset-on-public.svg）引用这些资源时，构建后会保留根路径开头，不受base: './'的影响，导致请求指向服务器根目录而非部署子路径。

解决方案 #

方案1：修改资源引用为相对路径

把代码中对public资源的绝对路径引用改成相对路径：

• 原引用：<img src="/asset-on-public.svg">
• 修改后：<img src="./asset-on-public.svg">

构建后，浏览器会基于当前页面路径（https://example.com/iframes/app/）请求资源，自动补全为期望的https://example.com/iframes/app/asset-on-public.svg。

方案2：指定正确的base路径

直接在vite.config.js中设置部署的实际子路径作为base值，替代./：

base: '/iframes/app/', // 匹配你的部署路径
build: {
  outDir: 'dist',
  assetsDir: 'assets',
},

Vite会自动为所有资源（包括public目录下的）添加这个基础路径前缀，开发和生产环境都能正常适配，无需手动修改资源引用路径。

方案3：使用环境变量动态配置路径

如果需要保留绝对路径写法，同时适配不同环境，可借助Vite的环境变量：

1. 在项目根目录创建.env.production文件，添加：

   VITE_BASE_URL=/iframes/app/
   

2. 在代码中引用public资源时，使用环境变量占位符：

   <img src="%VITE_BASE_URL%asset-on-public.svg">
   

构建时Vite会自动将%VITE_BASE_URL%替换为生产环境的路径值，开发环境可通过.env.development设置VITE_BASE_URL=/保持正常访问。

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