Nuxt 4.2 + Tauri 2 接入指南把 Vue 元框架“静态化”后装进桌面/移动端

1、Checklist（为什么要这么做）

启用 SSG / SPA：ssr: false
Tauri 不支持依赖服务端的方案，因此 Nuxt 需要禁用 SSR。(Tauri)
frontendDist 使用默认 ../dist
Nuxt 静态产物放到 dist，Tauri 打包时把它当作前端资源目录。(Tauri)
构建走静态生成：generate（对应 nuxt generate / nuxi generate）
generate 会预渲染路由并输出可直接静态部署的文件。(Tauri)
（可选）关闭 Nuxt telemetry
可用 telemetry: false 或环境变量等方式关闭。(Tauri)

2、Tauri 侧配置：src-tauri/tauri.conf.json

这段配置的意义是：

tauri dev 前先启动 Nuxt dev server，并加载 devUrl
tauri build 前先执行 generate 产出 dist/，再把 frontendDist 打包进应用

json 复制代码

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

(Tauri)

3、Nuxt 侧配置：nuxt.config.ts（重点是移动端与稳定性）

官方推荐的 Nuxt 配置大致如下（你可以直接拷贝再按项目改动）：

ts 复制代码

export default defineNuxtConfig({
  compatibilityDate: '2025-05-15',

  // (optional) Enable the Nuxt devtools
  devtools: { enabled: true },

  // Enable SSG / SPA
  ssr: false,

  // Enables the dev server to be discoverable by other devices (useful for iOS physical devices)
  devServer: { host: '0' },

  vite: {
    // Better support for Tauri CLI output
    clearScreen: false,

    // Enable environment variables (include TAURI_*)
    envPrefix: ['VITE_', 'TAURI_'],

    server: {
      // Tauri requires a consistent port
      strictPort: true,
    },
  },

  // Avoids EMFILE: too many open files (watch)
  ignore: ['**/src-tauri/**'],
})

这些字段各自解决的问题：

ssr: false：让 Nuxt 走纯客户端渲染/静态路线，匹配 Tauri 的"静态宿主"模型。(Tauri)
devServer.host: '0'：让 dev server 可被同一局域网设备发现，真机调试（尤其 iOS 物理机）更顺畅。(Tauri)
vite.server.strictPort: true：端口固定，避免 Tauri 以为是 3000 但 Nuxt 自动换端口导致加载失败。(Tauri)
ignore: ['**/src-tauri/**']：减少 watch 造成的文件句柄过多（EMFILE）问题。(Tauri)
envPrefix：把 TAURI_ 前缀变量也注入到前端环境变量体系里，方便移动端/工具链联动。(Tauri)

4、package.json scripts（确保 Tauri 能调用到）

至少保证有 dev 与 generate（你的命令也可以用 pnpm/yarn/deno 版本，和 tauri.conf.json 对齐即可）：

json 复制代码

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

nuxt generate 会把路由预渲染并输出静态文件，适合让 Tauri 打包。(Nuxt)

5、一键启动与构建（你最终只需要两条命令）

开发运行：

bash 复制代码

cargo tauri dev

打包构建：

bash 复制代码

cargo tauri build

Tauri CLI 会在构建时使用 build.beforeBuildCommand 先生成前端产物，再读取 build.frontendDist 将其打包进应用。(Tauri)

6、常见问题快速定位

运行时窗口白屏：优先确认 Nuxt 端口是否仍是 3000（strictPort），以及 tauri.conf.json 的 devUrl/frontendDist 路径是否正确。(Tauri)
Nuxt HMR/WebSocket 异常：通常和 dev server 绑定地址、网络环境有关，移动端尤其明显；确保 devServer.host 配好，并尽量避免端口漂移。(Tauri)