Skip to content

常用场景

组件注册与类型

ts
componentRegistry({
	dirs: ["src/components", "src/features"],
	output: "src/components/index.ts",
	dts: "types/components.d.ts",
	conflict: "error",
});

生成模块为每个组件提供命名导出、组件名Instance = InstanceType<typeof 组件名> 实例类型和 registerComponents(app),注册代码直接使用 app.component(Component.name, Component)。插件能够静态确认组件未声明运行时 name 时会在生成阶段警告,但仍继续生成;无法可靠判断时默认按已声明处理。类型声明文件同步增强 Vue GlobalComponentsindex.vue 默认使用父目录名,所有生成名称都必须是唯一且合法的 JavaScript 标识符。

CDN 外部化

ts
cdnImport({
	modules: [
		{
			name: "vue",
			global: "Vue",
			version: "3.5.0",
			js: "dist/vue.global.prod.js",
		},
	],
	dev: false,
});

支持默认导入、命名导入、命名重导出、export * as name 和静态字符串动态导入。普通 export * from "module" 无法安全枚举全局对象,会明确报错。

启用 dev: true 时,开发服务器会注入 CDN 标签并转换 JavaScript 模块引用,同时跳过 HTML 内联样式及其他 CSS 请求。

构建信息

ts
buildInfo({
	fileName: "meta/build-info.json",
	data: ({ mode }) => ({ channel: mode === "production" ? "stable" : "preview" }),
});

构建后可请求 /meta/build-info.json;开发服务器默认提供同名端点。源码中也可以导入 virtual:fast-vite/build-info,对应类型声明示例见 API 文档

生产质量门禁

ts
export default defineConfig({
	plugins: [
		subresourceIntegrity({ algorithms: "sha384", manifest: true }),
		bundleBudget({
			budgets: [
				{ name: "单个 JS", filter: /\.js$/, limit: 250 * 1024, requireMatch: true },
				{ name: "CSS 总量", filter: /\.css$/, limit: 50 * 1024, mode: "gzip", scope: "total" },
			],
		}),
		compression({ algorithms: ["gzip", "brotli"] }),
	],
});

同时使用这些插件时,应保持 subresourceIntegritybundleBudgetcompression 的顺序。

外部配置变更重启

ts
devRestart({
	paths: ["schema", "config/features.json"],
	debounce: 100,
});

用于 Vite 模块图之外但会影响插件初始化的配置或生成输入。Vite 已原生处理 vite.config.env,无需重复监听。