electron+vite+vue项目的研究

目的是为了创建一个vue3的vite项目，然后可以在electron中运行，找了一些文档，具体结果如下

官网的文档

简介 | Electron

参考的链接

vite-plugin-electron 最详细配置方案-CSDN博客

启动的配置

首先创建一个vue3的vite项目，然后选择vue3、ts等等，不在赘述

npm init vite -y

之后安装electron

npm install --save-dev electron

使用electron . 基本的内容都是按照官方的文档走，先安装然后在package.json中写调试，写electron调的js文件，然后创建js文件

{
  "scripts": {
    "start": "electron ."
  }
}

main.js文件的内容 

import { BrowserWindow, Menu, Tray, app, ipcMain, session } from "electron";
const createWindow = () => {
    const win = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
        devTools: true,
        nodeIntegration: true,
        contextIsolation: false,
        webSecurity: false,
      },
    })
  
    win.loadURL('http://localhost:8585/')
  }
  app.whenReady().then(() => {
    createWindow()
  })

此时的项目是可以的，问题在于需要npm两次，一个是npm run dev启动vite项目，让端口8585（自己在vite.config.ts中设置的）运行出内容，一次是npm run electron，启动electron，之后electron的窗口的地址指向8585，就可以了。

// 这段代码就是指向8585端口
win.loadURL('http://localhost:8585/')

这样有点麻烦，可以使用插件vite-plugin-electron

用法如下，先把main.js的内容迁移到electron/main.ts文件中。在vite.config.ts中先引入，然后在插件中使用

// 先引入
import electron from "vite-plugin-electron";
// 之后在plugins中使用
plugins: [vue(),electron({
    entry: 'electron/main.ts',
  })],

同时在package.json中设置main

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

这样只需要启动一次npm run dev，就可以直接启动一个electron的窗口。

打包的配置

vite.config.ts的内容

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import electron from "vite-plugin-electron";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),electron({
    entry: 'electron/main.ts',
    vite:{
      build:{
        outDir:'dist'
      }
    }
  })],
  server: {
    host: '0.0.0.0',
    port: 8585,
    strictPort: false,
    open: false,
    hmr: true
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, './src')
    }
  }
})

main.ts的内容

import { BrowserWindow, Menu, Tray, app, ipcMain, session } from 'electron'
import path from 'path'
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      devTools: true,
      nodeIntegration: true,
      contextIsolation: false,
      webSecurity: false
    }
  })

  //   win.loadURL('http://localhost:8585/')
  if (process.env.npm_lifecycle_event == 'dev') {
    //开发时的地址
    win.loadURL('http://localhost:8585/')
    console.log('dev true')
  } else {
    //打包时的地址  __dirname 为前build里配置的入口地址 即：.../www/  所以配置后为 ../www/index.html
    win.loadFile(path.join(__dirname, './index.html'))
  }
}
app.whenReady().then(() => {
  createWindow()
})

package.json的内容，这句比较关键，

"main": "dist/main.js",

之后，先使用vite的npm run build 打出本地包，按照electron的官方文档make打包就可以了。如果提示缺少包，直接复制缺少的包安装即可。

打包您的应用程序 | Electron

注意这里有几个问题，在使用vite-plugin-electron插件之后，在不写vite：｛build：｛outDir｝｝的情况下，会默认在dist-electron中生成一个main.js文件，这个文件就是插件根据入口文件转换出去的main.js文件，转换出去的文件地址，需要放在package.json文件中一一对应，否则electron启动不了。

// 初始的文件地址
"main": "dist-electron/main.js",

如果写了下面的代码，则插件会在dist的文件夹下面生成main.js文件，那么package.json的main需要改成"main": "dist/main.js",

plugins: [vue(),electron({
    entry: 'electron/main.ts',
    vite:{
      build:{
        outDir:'dist'
      }
    }
  })],

之所以这么配置，是因为electron在打包的时候，需要找到对应的index.html文件

// 需要找到index.html文件
win.loadFile(path.join(__dirname, "./index.html"));

之所以把插件的outDir地址改成dist，是因为vite打包之后会把文件放在dist文件夹中，使用插件把electron的main.js也改为dist文件夹中，make打包的时候才能找到index.html文件