静态资源 · Cloudflare Workers docs

本指南重点介绍使用静态资源时 Vite 插件特有的方面。更多通用文档请参阅静态资源。

配置

Vite 插件不要求提供 assets 字段来启用资源，而是根据是否已构建 client 环境来确定是否应包含资源。默认情况下，满足以下任一条件时会构建 client 环境：

项目根目录中有 index.html 文件
在 Vite 配置中指定了 build.rollupOptions.input 或 environments.client.build.rollupOptions.input
你有非空的 public 目录 ↗
Worker 将资源作为 URL 导入 ↗

运行 vite build 时，会在构建输出中生成输出 wrangler.json 配置文件。此文件中的 assets.directory 字段会自动填充为 client 构建输出的路径。因此，无需在输入 Worker 配置中提供 assets.directory 字段。

但是，如果希望设置路由配置或启用资源绑定（assets binding），应使用 assets 配置。以下示例为单页应用程序配置 not_found_handling，使回退始终为根 index.html 文件。

{
	"assets": {
		"not_found_handling": "single-page-application"
	}
}

[assets]
not_found_handling = "single-page-application"

Vite 插件确保 Vite 的所有静态资源处理 ↗功能在 Worker 和前端中均受支持。这些功能包括将资源作为 URL 导入、作为字符串导入，以及从 public 目录导入和内联资源。

作为 URL 导入的资源 ↗可通过资源绑定（assets binding）获取。由于绑定的 fetch 方法需要完整 URL，我们建议使用请求 URL 作为 base。以下示例演示了这一点：

import myImage from "./my-image.png";

export default {
	fetch(request, env) {
		return env.ASSETS.fetch(new URL(myImage, request.url));
	},
};

在 Worker 中作为 URL 导入的资源将自动移动到 client 构建输出。运行 vite build 时，任何移动的资源路径将显示在控制台中。

通过在 public 目录 ↗ 中添加 _headers 和 _redirects 文件，可在构建、预览和部署时支持自定义标头和重定向。这些文件中的路径应反映 client 构建输出的结构。例如，生成的资源通常位于 assets 子目录 ↗ 中。