vite-plugin-electron 最详细配置方案

vite-plugin-electron 

完全兼容Vite及Vite生态（基于Vite）灵活配置 API少，简单易用热重启

默认配置 如：

import electron from "vite-plugin-electron";

import electron from 'vite-plugin-electron'

export default {
  plugins: [
    electron({
      entry: 'electron/main.ts',
    }),
  ],
}

electron/main.ts 文件配置

import { app, BrowserWindow } from 'electron'

app.whenReady().then(() => {
  const win = new BrowserWindow({
    title: 'Main window',
  })

  // 当调用“serve”命令时，可以使用“process.env.VITE_DEV_SERVER_URL”`
  if (process.env.VITE_DEV_SERVER_URL) {
    win.loadURL(process.env.VITE_DEV_SERVER_URL)
  } else {
    //默认地址
    win.loadFile('dist/index.html');
  }
})

package.json 文件配置 

"main": "dist-electron/main.js"

注意：需要删除 "type":"module"

到此就结束了，

如里需要指定文件输出，需要注意三个地方，不能错

1、如下

   electron({
      entry: 'electron/index.ts',
      vite:{
        build:{
          outDir:"www"
        }
      }
    }),

2、在vite 本身的build 也同样需要指定到这个文件下，当然也可以别的文件，需要另外处理

build:{
    outDir:"www"
  },

3、package.json 

"main": "www/index.js",

4、electron-builder 打包时需要注意地方

  //process.env.npm_lifecycle_event 为 npm run dev 指向dev
if (process.env.npm_lifecycle_event == 'dev') {
    //开发时的地址
    win.loadURL('http://localhost:3008/');
  } else {
    //打包时的地址  __dirname 为前build里配置的入口地址 即：.../www/  所以配置后为 ../www/index.html
    win.loadFile(path.join(__dirname, "./index.html"))
  }