openElement 通过 Vite 插件配置。路由、island、静态输出、head 注入、PWA 和 middleware 是各自独立的关注点。
import { defineConfig } from 'vite'; import { openElement } from '@openelement/app/vite'; export default defineConfig({ plugins: [openElement()] });使用 openElement() 是推荐方式--它组合了核心插件、内容管线和 i18n，一个调用包含所有功能。如果你只需要核心路由和 island 功能，也可以单独使用 openPipeline() from @openelement/adapter-vite。
| Option | Default | Purpose |
|---|---|---|
| routesDir | 'app/routes' | Page routes, API routes, renderer and route-tree middleware. |
| islandsDir | 'app/islands' | Custom Elements for local client-side upgrade. |
| componentsDir | 'app/components' | Shared server-rendered components. |
| packageIslands | [] | Packages that export an islands metadata array. |
openElement v0.24.1 使用 JSX + Signal 作为组件模型。需要配置 deno.json 和 vite.config.ts：
// deno.json{"compilerOptions": {"jsx": "react-jsx", "jsxImportSource": "@openelement/core"}, "imports": {"@openelement/core/jsx-runtime": "jsr:@openelement/core@^0.24.1/jsx-runtime", "@openelement/core/jsx-dev-runtime": "jsr:@openelement/core@^0.24.1/jsx-runtime"}}// vite.config.tsexport default defineConfig({esbuild: {jsx: 'automatic', jsxImportSource: '@openelement/core',}, plugins: [openElement({ ... })]});jsx: 'automatic' 告诉 esbuild 使用 openElement 的 jsx-runtime 而不是 React 的。Vite 的 SSR 和 client island 构建都会正确转换 .tsx 文件。
openElement({html: { lang: 'en', title: 'My App' }, inject: {stylesheets: ['https://cdn.example.com/theme.css'], headFragments: ['<meta name="theme-color" content="#050505">'],}, packageIslands: ['@openelement/ui'], middleware: { logger: true, cors: true, csp: { policy: "default-src 'self'" } }, pwa: { name: 'My App', shortName: 'openElement', themeColor: '#050505' }, content: { blog: { contentDir: 'posts' }, nav: { routesDir: 'app/routes' } }, i18n: { locales: ['en', 'zh'], defaultLocale: 'en' },});