Nuxt Electron

集成 Nuxt 和 Electron

特性

📦 开箱即用
🔥 热重启 _^(主进程)
🚀 热重载 _{^{(预加载脚本)}}

快速设置

将以下依赖项添加到您的项目中

# Using pnpm
pnpm add -D nuxt-electron vite-plugin-electron vite-plugin-electron-renderer electron electron-builder

# Using yarn
yarn add --dev nuxt-electron vite-plugin-electron vite-plugin-electron-renderer electron electron-builder

# Using npm
npm install --save-dev nuxt-electron vite-plugin-electron vite-plugin-electron-renderer electron electron-builder

将 nuxt-electron 添加到 nuxt.config.ts 文件的 modules 部分

export default defineNuxtConfig({
  modules: ['nuxt-electron'],
  electron: {
    build: [
      {
        // Main-Process entry file of the Electron App.
        entry: 'electron/main.ts',
      },
    ],
  },
})

创建 electron/main.ts 文件并输入以下代码

import { app, BrowserWindow } from 'electron'

app.whenReady().then(() => {
  new BrowserWindow().loadURL(process.env.VITE_DEV_SERVER_URL)
})

将 main 入口添加到 package.json 中

{
+ "main": "dist-electron/main.js"
}

就是这样！您现在可以在您的 Nuxt 应用中使用 Electron ✨

Electron 选项

这基于 vite-plugin-electron，请参阅 **文档** 以获取更多详细选项

export interface ElectronOptions {
  /**
   * `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.
   * 
   * @example
   * 
   * ```js
   * export default defineNuxtConfig({
   *   modules: ['nuxt-electron'],
   *   electron: {
   *     build: [
   *       {
   *         // Main-Process entry file of the Electron App.
   *         entry: 'electron/main.ts',
   *       },
   *     ],
   *   },
   * })
   * ```
   */
  build: import('vite-plugin-electron').ElectronOptions[],
  /**
   * @see https://github.com/electron-vite/vite-plugin-electron-renderer
   */
  renderer?: Parameters<typeof import('vite-plugin-electron-renderer').default>[0]
  /**
   * nuxt-electron will modify some options by default
   * 
   * @defaultValue
   * 
   * ```js
   * export default defineNuxtConfig({
   *   ssr: false,
   *   app: {
   *     baseURL: './',
   *     buildAssetsDir: '/',
   *   },
   *   runtimeConfig: {
   *     app: {
   *       baseURL: './',
   *       buildAssetsDir: '/',
   *     },
   *   },
   *   nitro: {
   *     runtimeConfig: {
   *       app: {
   *         baseURL: './,
   *       }
  *      }
   *   },
   * })
   * ```
   */
  disableDefaultOptions?: boolean
}

让我们以官方的 nuxt-starter-v3 模板为例

+ ├─┬ electron
+ │ └── main.ts
  ├─┬ public
  │ └── favicon.ico
  ├── .gitignore
  ├── .npmrc
  ├── index.html
  ├── app.vue
  ├── nuxt.config.ts
  ├── package.json
  ├── README.md
  └── tsconfig.json

示例

备注

默认情况下，我们强制应用程序以 SPA 模式运行，因为我们不需要桌面应用程序的 SSR

如果要完全自定义默认行为，可以通过 disableDefaultOptions 禁用它

待办事项

编写测试