在 vite 项目中，公共目录默认配置为项目根目录下的 public 文件夹。任何放置在该目录中的静态资源都会在开发服务器启动时直接复制到构建输出目录中，并在运行时通过绝对路径访问。要修改这一行为，可以在 vite.config.js 文件中将 base 选项设置为相对路径 './'，或者使用 build.outdir 自定义输出位置，但通常只需确保文件放在默认的 public 目录下即可实现资源的自动托管。
如何自定义公共目录的路径
如果希望将静态资源存放在非 public 的目录（例如 assets/static），Vite 原生并不支持直接更改“公共目录”的名称或路径来替代默认的 public 机制。正确的做法是保持 public 目录不变，或者将其他目录中的文件在构建前手动拷贝到 public 中。若仅需改变资源的引用前缀，可通过配置 base 选项来实现，这会影响所有静态资源的 URL 生成方式，而不仅仅是公共目录的内容。
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
base: './', // 设置相对路径，使 public 下的资源通过相对路径访问
build: {
outDir: 'dist' // 指定构建输出目录
}
})
上述配置中，base: './' 是关键设置。当 base 为 '/'（默认值）时，public/logo.png 会被引用为 /logo.png。当设置为 './' 时，它会被引用为 ./logo.png。这种变化对于部署在非根路径下的应用尤为重要。需要注意的是，public 目录本身的位置无法通过配置项直接重定向，它是 Vite 约定的固定入口。
立即学习“Java免费学习笔记（深入）”；
公共目录与 src/assets 的区别是什么
public 目录用于存放不需要经过 Vite 处理、直接原样输出的静态文件，如 favicon.ico 或 robots.txt。而 src/assets 目录中的文件在引入时会被 Vite 的打包流程处理，包括图片压缩、字体转换和路径重写。选择哪个目录取决于资源是否需要被模块系统引用以及是否需要进行预处理。如果资源在 HTML 模板中通过硬编码路径引用，应放入 public；如果在 JS/TS 中通过 import 引用，则应放入 src/assets。
<!-- index.html --> <link rel="icon" href="/favicon.ico" /> // main.js import logo from './assets/logo.png' // 来自 src/assets const img = new Image() img.src = '/bg.jpg' // 来自 public
在上面的代码示例中，favicon.ico 位于 public 目录，因此在 HTML 中直接使用绝对路径 /favicon.ico 引用。而 logo.png 位于 src/assets，通过 ES Module 导入，Vite 会将其转换为哈希文件名并返回其最终 URL。bg.jpg 同样位于 public，但在 JS 中通过字符串字面量引用，Vite 不会对其进行处理，而是保留原始路径。这种区分确保了构建后的资源引用正确无误。
构建后 public 目录的文件如何访问
构建完成后，public 目录中的所有文件会被直接复制到 build.outDir 指定的输出目录根路径下。这意味着它们在最终部署的应用中可以通过相对于应用根路径的 URL 直接访问。例如，如果 public/images/banner.png 存在，构建后将在 dist/images/banner.png 找到它，并通过 /images/banner.png 访问。这种机制保证了静态资源的即时可用性，无需经过模块解析。
