Tauri v2 JavaScript前端集成指南：React/Vue/Svelte/Next.js桌面应用开发

integrating-tauri-js-frontends by dchuk/claude-code-tauri-skills

154 周安装量

12 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/dchuk/claude-code-tauri-skills --skill integrating-tauri-js-frontends

开发 JavaScript 框架

🇨🇳中文介绍

Tauri v2 JavaScript 前端集成

本技能涵盖将 JavaScript 前端框架与 Tauri v2 集成以进行桌面应用程序开发。

核心架构

Tauri 充当静态 Web 主机，通过原生 Webview 提供 HTML、CSS、JavaScript 和 WASM 文件。该框架与前端无关，但需要特定配置以实现最佳集成。

支持的应用程序类型

静态站点生成 (SSG)
单页应用程序 (SPA)
多页应用程序 (MPA)

不支持

原生形式的服务器端渲染 (SSR)。所有框架都必须配置为静态输出。

通用要求

关键原则

需要静态输出 : Tauri 无法运行 Node.js 服务器 - 所有内容都必须是预构建的静态文件
客户端-服务器架构 : 在应用程序和 API 之间实现适当的客户端-服务器关系（无混合 SSR 解决方案）
移动端开发 : 需要在您的内部 IP 上托管前端的开发服务器

通用的 tauri.conf.json 结构

{
  "build": {
    "beforeDevCommand": "<package-manager> dev",
    "beforeBuildCommand": "<package-manager> build",
    "devUrl": "http://localhost:<port>",
    "frontendDist": "../<output-dir>"
  }
}

将 <package-manager> 替换为 npm run、、或。

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

Vite (React, Vue, Svelte, Solid)

Vite 是 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 服务器。

必须在 next.config 中使用 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"
  }
}

Next.js 的 SSG 注意事项

out 目录包含静态导出文件
动态路由需要 generateStaticParams()
不支持 API 路由 - 请改用 Tauri 命令
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 的 SSG 注意事项

生产构建使用 nuxt generate（创建静态文件）
服务器路由 (/server/api) 不可用 - 请使用 Tauri 命令
SSG 模式下 Nitro 服务器功能被禁用

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;

src/routes/+layout.ts

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"
  }
}

SvelteKit 的 SSG 注意事项

对于在 load 函数中完全访问 Tauri API，推荐使用 SPA 模式（无预渲染）
使用预渲染时，load 函数在构建时执行，无法访问 Tauri API
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"
  }
}

Qwik 的 SSG 注意事项

静态适配器是必需的
Qwik City 服务器功能不可用
后端功能请使用 Tauri 命令

框架	输出目录	开发端口	构建命令	关键配置
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 配置示例）。

问题：Tauri API 不可用

原因 : 代码在 SSG 构建时执行，而非运行时。

对使用 Tauri API 的页面禁用预渲染
使用 ssr: false 的动态导入
在调用 API 前检查 window.__TAURI__

问题：热重载不工作

原因 : 文件监视器包含了 src-tauri 目录。

解决方案 : 在 Vite 配置的监视忽略列表中添加 **/src-tauri/**。

问题：移动端开发失败

原因 : 开发服务器无法通过网络访问。

解决方案 : 将主机设置为 0.0.0.0 或使用 TAURI_DEV_HOST 环境变量。

问题：构建因 SSR 错误而失败

原因 : 框架尝试进行服务器端渲染。

解决方案 : 确保 SSR 已禁用：

Next.js: output: 'export'
Nuxt: ssr: false
SvelteKit: 在布局中设置 export const ssr = false
Qwik: 使用静态适配器

Tauri 提供的变量

变量	描述
`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

🇺🇸English

Tauri v2 JavaScript Frontend Integration

This skill covers integrating JavaScript frontend frameworks with Tauri v2 for desktop application development.

Core Architecture

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.

Supported Application Types

Static Site Generation (SSG)
Single-Page Applications (SPA)
Multi-Page Applications (MPA)

Not Supported

Server-side rendering (SSR) in its native form. All frameworks must be configured for static output.

General Requirements

Key Principles

Static Output Required : Tauri cannot run a Node.js server - all content must be pre-built static files
Client-Server Architecture : Implement proper client-server relationships between app and APIs (no hybrid SSR solutions)
Mobile Development : Requires a development server hosting the frontend on your internal IP

Common tauri.conf.json Structure

{
  "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.

Framework Configurations

Vite (React, Vue, Svelte, Solid)

Vite is the recommended choice for SPA frameworks due to its fast development experience and simple configuration.

package.json

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "tauri": "tauri"
  }
}

vite.config.ts

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,
  },
});

tauri.conf.json

{
  "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build",
    "devUrl": "http://localhost:5173",
    "frontendDist": "../dist"
  }
}

Next.js

Next.js requires static export mode since Tauri cannot run Node.js servers.

Critical Requirements

Must use output: 'export' in next.config
Images must be unoptimized for static export
Asset prefix required for development server

next.config.mjs

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;

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "tauri": "tauri"
  }
}

tauri.conf.json

{
  "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build",
    "devUrl": "http://localhost:3000",
    "frontendDist": "../out"
  }
}

SSG Considerations for Next.js

The out directory contains static exports
Dynamic routes require generateStaticParams()
API routes are not supported - use Tauri commands instead
next/image optimization is disabled; use standard <img> or configure unoptimized

Nuxt

Nuxt must run in SSG mode with ssr: false for Tauri compatibility.

nuxt.config.ts

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/**'],
      },
    },
  },
});

package.json

{
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "tauri": "tauri"
  }
}

tauri.conf.json

{
  "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run generate",
    "devUrl": "http://localhost:3000",
    "frontendDist": "../dist"
  }
}

SSG Considerations for Nuxt

Use nuxt generate for production builds (creates static files)
Server routes (/server/api) are not available - use Tauri commands
Nitro server functionality is disabled in SSG mode

SvelteKit

SvelteKit requires the static adapter and SSR must be disabled.

Installation

npm install --save-dev @sveltejs/adapter-static

svelte.config.js

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;

src/routes/+layout.ts

export const ssr = false;
export const prerender = true;

vite.config.ts

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_*'],
});

tauri.conf.json

{
  "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build",
    "devUrl": "http://localhost:5173",
    "frontendDist": "../build"
  }
}

SSG Considerations for SvelteKit

SPA mode (without prerendering) is recommended for full Tauri API access in load functions
With prerendering, load functions execute at build time without Tauri API access
The fallback: 'index.html' enables SPA routing
Output directory is build/ by default

Qwik

Qwik requires the static adapter for Tauri compatibility.

Setup

# 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

package.json

{
  "scripts": {
    "dev": "vite",
    "build": "qwik build",
    "tauri": "tauri"
  }
}

tauri.conf.json

{
  "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build",
    "devUrl": "http://localhost:5173",
    "frontendDist": "../dist"
  }
}

SSG Considerations for Qwik

The static adapter is mandatory
Qwik City server functions are not available
Use Tauri commands for backend functionality

Quick Reference Table

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`

Common Issues and Solutions

Issue: Assets Not Loading in Development

Cause : Asset prefix not configured for development server.

Solution : Configure asset prefix to point to dev server (see Next.js config example).

Issue: Tauri APIs Unavailable

Cause : Code executing during SSG build time instead of runtime.

Solution :

Disable prerendering for pages using Tauri APIs
Use dynamic imports with ssr: false
Check for window.__TAURI__ before API calls

Issue: Hot Reload Not Working

Cause : File watcher including src-tauri directory.

Solution : Add **/src-tauri/** to watch ignore list in Vite config.

Issue: Mobile Development Fails

Cause : Dev server not accessible on network.

Solution : Set host to 0.0.0.0 or use TAURI_DEV_HOST environment variable.

Issue: Build Fails with SSR Errors

Cause : Framework attempting server-side rendering.

Solution : Ensure SSR is disabled:

Next.js: output: 'export'
Nuxt: ssr: false
SvelteKit: export const ssr = false in layout
Qwik: Use static adapter

Environment Variables

Tauri-Provided Variables

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

Recommended envPrefix

envPrefix: ['VITE_', 'TAURI_ENV_*']

Build Targets

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
}

Mobile Development

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

dchuk/claude-co…i-skills

GitHub Stars

First Seen

Jan 24, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode86

gemini-cli84

codex83

claude-code75

cursor73

github-copilot73

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

113,700 周安装

Tauri v2 JavaScript前端集成指南：React/Vue/Svelte/Next.js桌面应用开发

🇨🇳中文介绍

Tauri v2 JavaScript 前端集成

核心架构

支持的应用程序类型

不支持

通用要求

关键原则

通用的 tauri.conf.json 结构

相关 Skills

框架配置

Vite (React, Vue, Svelte, Solid)

package.json

vite.config.ts

tauri.conf.json

Next.js

关键要求

next.config.mjs

package.json

tauri.conf.json

Next.js 的 SSG 注意事项

Nuxt

nuxt.config.ts

package.json

tauri.conf.json

Nuxt 的 SSG 注意事项

SvelteKit

安装

svelte.config.js

src/routes/+layout.ts

vite.config.ts

tauri.conf.json

SvelteKit 的 SSG 注意事项

Qwik

设置

package.json

tauri.conf.json

Qwik 的 SSG 注意事项

快速参考表

常见问题与解决方案

问题：开发时资源未加载

问题：Tauri API 不可用

问题：热重载不工作

问题：移动端开发失败

问题：构建因 SSR 错误而失败

环境变量

Tauri 提供的变量

推荐的 envPrefix

构建目标

移动端开发

🇺🇸English

Tauri v2 JavaScript Frontend Integration

Core Architecture

Supported Application Types

Not Supported

General Requirements

Key Principles

Common tauri.conf.json Structure

Framework Configurations

Vite (React, Vue, Svelte, Solid)

package.json

vite.config.ts

tauri.conf.json

Next.js

Critical Requirements

next.config.mjs

package.json

tauri.conf.json

SSG Considerations for Next.js

Nuxt

nuxt.config.ts

package.json

tauri.conf.json

SSG Considerations for Nuxt

SvelteKit

Installation

svelte.config.js

src/routes/+layout.ts

vite.config.ts

tauri.conf.json