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 配置大致如下（你可以直接拷贝再按项目改动）：

arduino 复制代码

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、一键启动与构建（你最终只需要两条命令）

开发运行：

cargo tauri dev
打包构建：

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)