vite中的静态文件处理

两种常见放置方式

方式一：放在 src 里并通过 import 引入

import logo from "./assets/logo.png";

特点：

• 会参与构建流程
• 小图可能被转成 base64
• 文件名会带 hash，利于缓存

方式二：放在 public 目录

例如：public/favicon.ico

访问方式：

<link rel="icon" href="/favicon.ico" />

特点：

• 不会被打包处理
• 原样拷贝到产物目录
• 适合不需要构建加工的静态资源

URL 处理（new URL 写法）

const imgUrl = new URL("./assets/banner.png", import.meta.url).href;

适合在脚本中动态拼接资源地址。

构建后的资源目录

可以在 vite.config.js 中配置：

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    assetsDir: "static",
  },
});

大文件建议

默认小资源可能会内联为 base64，大资源走文件输出。
如果你想调整阈值，可以配置 build.assetsInlineLimit。

小结

• 需要构建处理：放 src/assets
• 原样输出：放 public

只要记住这个划分，日常项目的静态资源管理就很清晰。