vite+vue3 使用 electron

1、安装 electron 和支持 vite 插件

npm i electron vite-plugin-electron -D

2、根目录新建 electron 入口文件 background.ts

// background.ts
import { app, BrowserWindow } from 'electron'

const createWindow = () => {
  const win = new BrowserWindow({})

  win.loadURL(`${process.env['VITE_DEV_SERVER_URL']}`)
}

app.whenReady().then(() => {
  createWindow()
})

3、vite.config.ts 中引入 electron 并配置入口文件

import electron from 'vite-plugin-electron'

plugins: [
    vue(),
    electron({
      entry: './background.ts' // 入口文件地址
    })
]

4、package.json

// 新增
"main": "dist-electron/background.js"
// 删除
"type": "module"

5、启动

npm run dev

6、安装打包插件

npm i electron-builder -D

7、package.json 配置打包

// 命令
"build": "vue-tsc --noEmit && vite build && electron-builder"
// 打包配置
"build": {
   "productName": "安装名",
   "asar": true,
   "directories": {
     "output": "build/"
   },
   "files": [
     "dist",
     "dist-electron/background.js"
   ],
   "mac": {
     "artifactName": "${productName}_${version}.${ext}",
     "target": [
       "dmg"
     ]
   },
   "win": {
     "target": [
       {
         "target": "nsis",
         "arch": [
           "x64"
         ]
       }
     ],
     "artifactName": "${productName}_${version}.${ext}"
   },
   "nsis": {
     "oneClick": false,
     "perMachine": false,
     "deleteAppDataOnUninstall": false
   }
 }

8、添加 vite 环境变量（开发环境）根目录新建 .env.development 文件

# 开发环境配置
VITE_APP_ENV = 'development'

9、添加 vite 环境变量（生产环境）根目录新建 .env.production 文件

# 生产环境配置
VITE_APP_ENV = 'production'

10、background.ts 文件中配置打包渲染页面

import { app, BrowserWindow } from 'electron'

const createWindow = () => {
  const win = new BrowserWindow({})

  if (import.meta.env.VITE_APP_ENV !== 'development') {
    win.loadFile('dist/index.html')
  } else {
    win.loadURL(`${process.env['VITE_DEV_SERVER_URL']}`)
  }
}

app.whenReady().then(() => {
  createWindow()
})

11、打包

npm run build