integrating-tauri-js-frontends by dchuk/claude-code-tauri-skills
npx skills add https://github.com/dchuk/claude-code-tauri-skills --skill integrating-tauri-js-frontends本技能涵盖将 JavaScript 前端框架与 Tauri v2 集成以进行桌面应用程序开发。
Tauri 充当静态 Web 主机,通过原生 Webview 提供 HTML、CSS、JavaScript 和 WASM 文件。该框架与前端无关,但需要特定配置以实现最佳集成。
原生形式的服务器端渲染 (SSR)。所有框架都必须配置为静态输出。
{
"build": {
"beforeDevCommand": "<package-manager> dev",
"beforeBuildCommand": "<package-manager> build",
"devUrl": "http://localhost:<port>",
"frontendDist": "../<output-dir>"
}
}
将 <package-manager> 替换为 npm run、、 或 。
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
yarnpnpmdeno taskVite 是 SPA 框架的推荐选择,因为它具有快速的开发体验和简单的配置。
{
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"tauri": "tauri"
}
}
import { defineConfig } from 'vite';
export default defineConfig({
clearScreen: false,
server: {
port: 5173,
strictPort: true,
host: process.env.TAURI_DEV_HOST || 'localhost',
watch: {
ignored: ['**/src-tauri/**'],
},
},
envPrefix: ['VITE_', 'TAURI_ENV_*'],
build: {
target: process.env.TAURI_ENV_PLATFORM === 'windows' ? 'chrome105' : 'safari13',
minify: process.env.TAURI_ENV_DEBUG ? false : 'esbuild',
sourcemap: !!process.env.TAURI_ENV_DEBUG,
},
});
{
"build": {
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build",
"devUrl": "http://localhost:5173",
"frontendDist": "../dist"
}
}
Next.js 需要静态导出模式,因为 Tauri 无法运行 Node.js 服务器。
output: 'export'const isProd = process.env.NODE_ENV === 'production';
const internalHost = process.env.TAURI_DEV_HOST || 'localhost';
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
images: {
unoptimized: true,
},
assetPrefix: isProd ? undefined : `http://${internalHost}:3000`,
};
export default nextConfig;
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"tauri": "tauri"
}
}
{
"build": {
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build",
"devUrl": "http://localhost:3000",
"frontendDist": "../out"
}
}
out 目录包含静态导出文件generateStaticParams()next/image 优化被禁用;请使用标准 <img> 或配置为未优化Nuxt 必须在 SSG 模式下运行,并设置 ssr: false 以兼容 Tauri。
export default defineNuxtConfig({
ssr: false,
telemetry: false,
devServer: {
host: '0.0.0.0', // iOS 设备兼容性所需
},
vite: {
clearScreen: false,
envPrefix: ['VITE_', 'TAURI_'],
server: {
strictPort: true,
watch: {
ignored: ['**/src-tauri/**'],
},
},
},
});
{
"scripts": {
"dev": "nuxt dev",
"build": "nuxt build",
"generate": "nuxt generate",
"tauri": "tauri"
}
}
{
"build": {
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run generate",
"devUrl": "http://localhost:3000",
"frontendDist": "../dist"
}
}
nuxt generate(创建静态文件)/server/api) 不可用 - 请使用 Tauri 命令SvelteKit 需要静态适配器,并且必须禁用 SSR。
npm install --save-dev @sveltejs/adapter-static
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: vitePreprocess(),
kit: {
adapter: adapter({
fallback: 'index.html',
}),
},
};
export default config;
export const ssr = false;
export const prerender = true;
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()],
clearScreen: false,
server: {
port: 5173,
strictPort: true,
host: process.env.TAURI_DEV_HOST || 'localhost',
watch: {
ignored: ['**/src-tauri/**'],
},
},
envPrefix: ['VITE_', 'TAURI_ENV_*'],
});
{
"build": {
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build",
"devUrl": "http://localhost:5173",
"frontendDist": "../build"
}
}
fallback: 'index.html' 启用 SPA 路由build/Qwik 需要静态适配器以兼容 Tauri。
# 创建项目
npm create qwik@latest
cd <project>
# 添加静态适配器
npm run qwik add static
# 添加 Tauri CLI
npm install -D @tauri-apps/cli@latest
# 初始化 Tauri
npm run tauri init
{
"scripts": {
"dev": "vite",
"build": "qwik build",
"tauri": "tauri"
}
}
{
"build": {
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build",
"devUrl": "http://localhost:5173",
"frontendDist": "../dist"
}
}
| 框架 | 输出目录 | 开发端口 | 构建命令 | 关键配置 |
|---|---|---|---|---|
| Vite | dist | 5173 | vite build | 标准 Vite 配置 |
| Next.js | out | 3000 | next build | output: 'export' |
| Nuxt | dist | 3000 | nuxt generate | ssr: false |
| SvelteKit | build | 5173 | vite build | adapter-static |
| Qwik | dist | 5173 | qwik build | 静态适配器 |
原因 : 开发服务器的资源前缀未配置。
解决方案 : 将资源前缀配置为指向开发服务器(参见 Next.js 配置示例)。
原因 : 代码在 SSG 构建时执行,而非运行时。
解决方案 :
ssr: false 的动态导入window.__TAURI__原因 : 文件监视器包含了 src-tauri 目录。
解决方案 : 在 Vite 配置的监视忽略列表中添加 **/src-tauri/**。
原因 : 开发服务器无法通过网络访问。
解决方案 : 将主机设置为 0.0.0.0 或使用 TAURI_DEV_HOST 环境变量。
原因 : 框架尝试进行服务器端渲染。
解决方案 : 确保 SSR 已禁用:
output: 'export'ssr: falseexport const ssr = false| 变量 | 描述 |
|---|---|
TAURI_DEV_HOST | 移动端开发的主机 IP |
TAURI_ENV_PLATFORM | 目标平台 (windows, macos, linux, ios, android) |
TAURI_ENV_DEBUG | 在调试构建期间设置 |
envPrefix: ['VITE_', 'TAURI_ENV_*']
根据平台 Webview 能力配置构建目标:
build: {
target: process.env.TAURI_ENV_PLATFORM === 'windows'
? 'chrome105' // Windows 上的 WebView2
: 'safari13', // macOS/Linux 上的 WebKit
}
对于 iOS 和 Android 开发,开发服务器必须可在网络上访问:
server: {
host: process.env.TAURI_DEV_HOST || '0.0.0.0',
strictPort: true,
}
使用适当的移动命令运行:
npm run tauri ios dev
npm run tauri android dev
每周安装量
106
代码仓库
GitHub 星标数
10
首次出现
2026年1月24日
安全审计
安装于
opencode86
gemini-cli84
codex83
claude-code75
cursor73
github-copilot73
This skill covers integrating JavaScript frontend frameworks with Tauri v2 for desktop application development.
Tauri functions as a static web host, serving HTML, CSS, JavaScript, and WASM files through a native webview. The framework is frontend-agnostic but requires specific configurations for optimal integration.
Server-side rendering (SSR) in its native form. All frameworks must be configured for static output.
{
"build": {
"beforeDevCommand": "<package-manager> dev",
"beforeBuildCommand": "<package-manager> build",
"devUrl": "http://localhost:<port>",
"frontendDist": "../<output-dir>"
}
}
Replace <package-manager> with npm run, yarn, pnpm, or deno task.
Vite is the recommended choice for SPA frameworks due to its fast development experience and simple configuration.
{
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"tauri": "tauri"
}
}
import { defineConfig } from 'vite';
export default defineConfig({
clearScreen: false,
server: {
port: 5173,
strictPort: true,
host: process.env.TAURI_DEV_HOST || 'localhost',
watch: {
ignored: ['**/src-tauri/**'],
},
},
envPrefix: ['VITE_', 'TAURI_ENV_*'],
build: {
target: process.env.TAURI_ENV_PLATFORM === 'windows' ? 'chrome105' : 'safari13',
minify: process.env.TAURI_ENV_DEBUG ? false : 'esbuild',
sourcemap: !!process.env.TAURI_ENV_DEBUG,
},
});
{
"build": {
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build",
"devUrl": "http://localhost:5173",
"frontendDist": "../dist"
}
}
Next.js requires static export mode since Tauri cannot run Node.js servers.
output: 'export' in next.configconst isProd = process.env.NODE_ENV === 'production';
const internalHost = process.env.TAURI_DEV_HOST || 'localhost';
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
images: {
unoptimized: true,
},
assetPrefix: isProd ? undefined : `http://${internalHost}:3000`,
};
export default nextConfig;
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"tauri": "tauri"
}
}
{
"build": {
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build",
"devUrl": "http://localhost:3000",
"frontendDist": "../out"
}
}
out directory contains static exportsgenerateStaticParams()next/image optimization is disabled; use standard <img> or configure unoptimizedNuxt must run in SSG mode with ssr: false for Tauri compatibility.
export default defineNuxtConfig({
ssr: false,
telemetry: false,
devServer: {
host: '0.0.0.0', // Required for iOS device compatibility
},
vite: {
clearScreen: false,
envPrefix: ['VITE_', 'TAURI_'],
server: {
strictPort: true,
watch: {
ignored: ['**/src-tauri/**'],
},
},
},
});
{
"scripts": {
"dev": "nuxt dev",
"build": "nuxt build",
"generate": "nuxt generate",
"tauri": "tauri"
}
}
{
"build": {
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run generate",
"devUrl": "http://localhost:3000",
"frontendDist": "../dist"
}
}
nuxt generate for production builds (creates static files)/server/api) are not available - use Tauri commandsSvelteKit requires the static adapter and SSR must be disabled.
npm install --save-dev @sveltejs/adapter-static
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: vitePreprocess(),
kit: {
adapter: adapter({
fallback: 'index.html',
}),
},
};
export default config;
export const ssr = false;
export const prerender = true;
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()],
clearScreen: false,
server: {
port: 5173,
strictPort: true,
host: process.env.TAURI_DEV_HOST || 'localhost',
watch: {
ignored: ['**/src-tauri/**'],
},
},
envPrefix: ['VITE_', 'TAURI_ENV_*'],
});
{
"build": {
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build",
"devUrl": "http://localhost:5173",
"frontendDist": "../build"
}
}
fallback: 'index.html' enables SPA routingbuild/ by defaultQwik requires the static adapter for Tauri compatibility.
# Create project
npm create qwik@latest
cd <project>
# Add static adapter
npm run qwik add static
# Add Tauri CLI
npm install -D @tauri-apps/cli@latest
# Initialize Tauri
npm run tauri init
{
"scripts": {
"dev": "vite",
"build": "qwik build",
"tauri": "tauri"
}
}
{
"build": {
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build",
"devUrl": "http://localhost:5173",
"frontendDist": "../dist"
}
}
| Framework | Output Dir | Dev Port | Build Command | Key Config |
|---|---|---|---|---|
| Vite | dist | 5173 | vite build | Standard Vite config |
| Next.js | out | 3000 | next build | output: 'export' |
| Nuxt | dist |
Cause : Asset prefix not configured for development server.
Solution : Configure asset prefix to point to dev server (see Next.js config example).
Cause : Code executing during SSG build time instead of runtime.
Solution :
ssr: falsewindow.__TAURI__ before API callsCause : File watcher including src-tauri directory.
Solution : Add **/src-tauri/** to watch ignore list in Vite config.
Cause : Dev server not accessible on network.
Solution : Set host to 0.0.0.0 or use TAURI_DEV_HOST environment variable.
Cause : Framework attempting server-side rendering.
Solution : Ensure SSR is disabled:
output: 'export'ssr: falseexport const ssr = false in layout| Variable | Description |
|---|---|
TAURI_DEV_HOST | Host IP for mobile development |
TAURI_ENV_PLATFORM | Target platform (windows, macos, linux, ios, android) |
TAURI_ENV_DEBUG | Set during debug builds |
envPrefix: ['VITE_', 'TAURI_ENV_*']
Configure build targets based on platform webview capabilities:
build: {
target: process.env.TAURI_ENV_PLATFORM === 'windows'
? 'chrome105' // WebView2 on Windows
: 'safari13', // WebKit on macOS/Linux
}
For iOS and Android development, the dev server must be accessible on the network:
server: {
host: process.env.TAURI_DEV_HOST || '0.0.0.0',
strictPort: true,
}
Run with the appropriate mobile command:
npm run tauri ios dev
npm run tauri android dev
Weekly Installs
106
Repository
GitHub Stars
10
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode86
gemini-cli84
codex83
claude-code75
cursor73
github-copilot73
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
113,700 周安装
| 3000 |
nuxt generate |
ssr: false |
| SvelteKit | build | 5173 | vite build | adapter-static |
| Qwik | dist | 5173 | qwik build | Static adapter |