Install
openclaw skills install @bovinphang/fec-vite-project-standardUse when creating, configuring, reviewing, or debugging Vite-based frontend projects, vite.config.ts, env variables, dev server proxy, HMR, plugin ordering, library mode, dependency pre-bundling, bundle splitting, or Vite build performance. Use framework-specific skills for React/Vue component archi
openclaw skills install @bovinphang/fec-vite-project-standardDesign and review of Vite applications, component libraries, development servers, and build configurations.
Standardize Vite configurations, security boundaries, and build performance to avoid common pitfalls of development environments and production builds.
Identify the project type
root, base, server.proxy, envPrefix, build and framework plugins first.build.lib, type products, peer dependencies external and export entries first.server.fs.allow, path aliases and package dependency boundaries.Select plugin
@vitejs/plugin-react-swc by default; use @vitejs/plugin-react only when the Babel plug-in is required.@vitejs/plugin-vue, and path aliases are given priority to vite-tsconfig-paths.tsc --noEmit, CI or vite-plugin-checker.Manage environment variables
VITE_.loadEnv uses an explicit prefix array and does not use an empty string to load all variables.Optimize development experience
vite --profile to locate plug-in, parsing or pre-built bottlenecks before slow start.optimizeDeps.include for CJS/UMD dependencies to handle interop issues.server.warmup.clientFiles to warm up the core entrance.Optimize production builds
vite build before release and use vite preview to do local build smoke testing.import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react-swc";
import tsconfigPaths from "vite-tsconfig-paths";
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), ["VITE_"]);
return {
plugins: [react(), tsconfigPaths()],
define: {
__PUBLIC_API_URL__: JSON.stringify(env.VITE_API_URL),
},
server: {
proxy: {
"/api": {
target: "http://localhost:8080",
changeOrigin: true,
},
},
},
};
});
vite build only translates and packages, not type checking; CI must run typecheck separately.VITE_ is not a security boundary; any VITE_ variable goes into the client package.envPrefix: "", do not use loadEnv(mode, root, "") and then define at will.vite preview as a production server..d.ts separately.define, import.meta.env or empty prefix loadEnv.The output should include project type judgment, key configuration changes, environment variable security instructions, and build/development performance verification methods. When completed, the Vite configuration should be type-checked, buildable, secret-secure, and explain the differences between dev and build.