vite+vue project uses electron

Create vite+vue project

npm create vite

Electron official documentation

electronic installation

Install electron

npm install --save-dev electron

Create a new entry file for electron. Here I create a new electron folder in the root directory, and then create a new main.jsand preload.jsfile

According to the official website instructions, write the following code into 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()
  }
})

According to the official website instructions, write the following code into 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])
  }
})

Configuration

Because electron uses commonjs syntax, the project cannot be started when the type is module.

The first one, without using other plug-ins

Modify the package.json file, add the electron entry file path and run command, and change the type value to commonjs

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

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

Then open the terminal and use npm run devthe startup project. This access URL is the content written by win.loadURL in main.js.

Then open a terminal and npm startstart the electron window using

The startup window does not need to be closed, the content changes with the hot loading of vite.

Second, use vite-plugin-electron

Install vite-plugin-electron

npm install vite-plugin-electron -D

Modify the package.json file, add the electron entry file path, and change the type value to commonjs

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

Modify the vite.config.js file, introduce the vite-plugin-electron plug-in and use it

import electron from "vite-plugin-electron";

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

Then just use npm run devthe startup project directly

Pack

electron-builder official documentation

Install electron-builder for packaging

npm install electron-builder -D

The most basic configuration

Add package.json packaging configuration

The most basic configuration is to only add the output directory, and then modify the build command so that vite packages the project files into the dist folder, and then uses electron-builder to package. Remember to change the loading code in the electron entry file
towin.loadFile('dist/index.html')

Other packaging configurations

You can also add a description and author in package.json

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

For other packaging configuration details, please see the official configuration document.

In addition to writing the packaging configuration in the build in package.json, you can also create a new electron-builder.ymlor configuration file electron-builder.json.electron-builder.json5

I use it here electron-builder.ymlbecause I can write comments and highlight it.

The following is the basic configuration of win packaging. There are too many details to make your eyes dazzled. You can check the official website by yourself.

{
  "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": {},
}