静态资源

json 文件、图片、打包后的文件（dist）都是常见的静态资源，静态资源都是一开始就被载入的；而动态资源则通过后续在页面中发起请求后获取的。

静态资源文件夹

vite 默认静态资源存放于为位于项目根目录下的 public 文件夹，该目录中的资源在开发时能直接通过 / 根路径访问到，并且打包时会被完整复制到目标目录的根目录下。

静态资源处理

vite 引入静态资源文件

vite 针对不同的静态资源，在导入 js 文件中时：

• css 文件：直接引入生效；
• js 文件：引入可输出为内部导出函数；
• 图片、媒体和字体文件类型：引入可以默认输出其文件所在的 url 地址；
• json 文件：引入可以默认输出为对象；

  vite 将其预处理为对象的键值对形式。

将资源引入为 url

一般来说图片、媒体和字体文件类型的文件会自动引入为 url，而 js 或其他文件则不会（引入为内部导出函数和对象），如果想让它们引入为 url 则可以使用 assetsInclude 选项，来添加内部静态资源路径问题。

import { defineConfig } from "vite";
export default defineConfig({
  assetsInclude: ["./src/plugin.ts", "**/*.gltf"],
});

在 vite 的内建支持的资源类型列表中已经包括了很多引入 url 地址使用的资源文件，所以其目的（assetsInclude ）主要是针对于那些没在里面的文件但是又需要通过 url 引入。（只是在下的猜测）

内建支持的资源类型列：

• images：’apng’,’bmp’,’png’,’jpe?g’,’jfif’,’pjpeg’,’pjp’,’gif’,’svg’,’ico’,’webp’,’avif’
• media：’mp4’,’webm’,’ogg’,’mp3’,’wav’,’flac’,’aac’,’opus’,’mov’,’m4a’,’vtt’
• fonts：’woff2?’,’eot’,’ttf’,’otf’
• other：’webmanifest’,’pdf’,’txt’

强制将资源引入为 url

未被包含在内部列表或 assetsInclude 中的资源，可以使用 ?url 后缀显式导入为一个 URL。

import testCss from "./assets/test.css?url ";
console.log("css-path", testCss);

vite 版本 5.3.1：主要是针对 css，可恶 css 的油盐不进，直接引入和放在 assetsInclude 中都不行。

将资源引入为源文件

资源可以使用 ?raw 后缀声明作为字符串（源文件）引入。

import testCss from "./assets/test.css?raw ";
import testPng from "./assets/box.png?raw";
import testJson from "./assets/test.json?raw";

console.log("json-raw", testJson);
console.log("png-raw", testPng);
console.log("css-raw", testCss);

css、js、json 都将其内容以文本形式输出。jpg、mp4 文件以流的形式输出。svg 以 html 文本（svg 标签）输出。