vite+vue 项目使用 electron

创建 vite+vue 项目
复制代码
npm create vite

electron 安装

安装 electron

复制代码

npm install --save-dev electron

新建 electron 的入口文件，我这里在根目录新建 electron 文件夹，然后新建main.js和preload.js文件

根据官网说明，将以下代码写入 main.js

复制代码

const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  // 这里需要修改一下，因为官网是直接初始化electron项目，内容是直接在根目录建了个 index.html，比较简单
  // win.loadFile('index.html')
  // 这里使用 vite+vue 按官网写启动项目后页面是空的，如果按打包后的目录来写就是下面这样
  // win.loadFile('dist/index.html')
  // 如果是在开发时，就可以改成加载启动项目后的url，例如vite默认启动是5173端口
  win.loadURL("http://localhost:5173/")
}

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

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

根据官网说明，将以下代码写入 preload.js

复制代码

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

配置

因为 electron 使用的是 commonjs 的语法，所以 type 为 module 时，无法启动项目

第一种，不使用其他插件

修改 package.json 文件，增加 electron 入口文件路径和运行命令，修改 type 值为 commonjs

复制代码

"type":"commonjs",
"main":"electron入口文件路径",

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

然后开启终端，使用npm run dev启动项目，这个访问 URL 就是 main.js 里 win.loadURL 写的内容

然后再开启一个终端，使用npm start启动 electron 窗口

启动的窗口可以不用关，内容是随着 vite 的热加载改变而改变的

第二种，使用 vite-plugin-electron

安装 vite-plugin-electron

复制代码

npm install vite-plugin-electron -D

修改 package.json 文件，增加 electron 入口文件路径，修改 type 值为 commonjs

复制代码

"type":"commonjs",
"main":"electron入口文件路径",

修改 vite.config.js 文件，引入 vite-plugin-electron 插件并使用

复制代码

import electron from "vite-plugin-electron";

plugins: [
  vue(),
  electron({
    entry: "electron 入口文件路径",
  }),
],

然后直接使用npm run dev启动项目即可

打包

electron-builder 官方文档

安装 electron-builder，用于打包

复制代码

npm install electron-builder -D

最基本配置

添加 package.json 打包配置

最基本的配置就是仅添加输出目录，然后修改 build 命令，使 vite 将项目文件打包到 dist 文件夹后，再使用 electron-builder 进行打包

记得打包前要将 electron 入口文件内的加载代码改为win.loadFile('dist/index.html')

其他打包配置

在 package.json 里还可以加描述及作者

复制代码

"description": "这是一个不负责任的描述",
"author": "作者",

其他的打包配置详情可以看官方配置文档

除了在 package.json 里的 build 里写打包配置，也可以另外新建electron-builder.yml、electron-builder.json或electron-builder.json5配置文件

我这里使用的electron-builder.yml，因为可以写注释还有高亮

下面是 win 打包基本配置，详细的太多了看得眼花，可以自行查看官网

复制代码

{
  "appId": "com.electron.desktop", # appid
  "productName": "filename", # 为可执行文件指定名称，默认为 package.json 的 name
  "copyright": "Copyright © year sywdebug", # 版权信息
  "directories": {
      "output": "release", # 输出路径
    },
  "mac": {},
  "win": {
      "target": "nsis", # 目标包类型：nsis 列表，nsis-webWeb 安装程序，portable 无需安装的便携式应用程序
      "icon": "dist/myIcon.ico", # 应用程序图标的路径，尺寸至少256*256
      "legalTrademarks": "", # 商标和注册商标
    },
  "nsis": {
      "oneClick": true, # 是否创建一键安装程序或辅助
      "perMachine": false, # 是否总是针对所有用户（每台机器）进行安装
      "allowToChangeInstallationDirectory": true, # 是否允许用户更改安装目录
      "removeDefaultUninstallWelcomePage": false, # 删除默认的卸载欢迎页面
    },
  "linux": {},
}