【记录】Electron+Vite+Vue3构建桌面应用记录一下学习vite+Electron构建桌面应用的过程。步骤也

前言

记录一下学习vite+Electron构建桌面应用的过程。

1、使用Vite构建一个vue3项目

这里使用yarn，当然npm,pnpm也可以，看自己的习惯。

yarn create vite

输入项目名称后回车进行下一步这里选择vue (第一个好像就是js原生)，回车下一步选择js，ts还没学，之后再说，回车完成 ok,创建完毕，接下来告诉你进入项目里，执行yarn安装依赖，然后yarn dev运行即可当然还有更快捷的方式，和上面创建的是一样的，一句代码搞定：

yarn create vite project-name --template vue

至此，一个使用vite构建的vue3项目就创建完成了！

2、安装Electron

先配置下镜像，不然下载和打包时都会超时出错

yarn config set electron_mirror https://npmmirror.com/mirrors/electron/

yarn config set electron_builder_binaries_mirror https://npmmirror.com/mirrors/electron-builder-binaries/

接下来开始安装electron

yarn add electron -D

接着安装vite-plugin-electron插件，该插件用于配置electron打包编译的文件入口

yarn add vite-plugin-electron -D

3、进行项目配置

根目录下创建electron/main.js主进程文件，具体配置可以前往官网查看Electron

目前的项目结构如下：在主进程文件electron/main.js中加入基础配置：

import { app, BrowserWindow } from 'electron';
import path from 'path'

const createdWindow = () => {
    const win = new BrowserWindow({
        width:900,
        height:600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation:false,
        }
    })

    if (process.env.VITE_DEV_SERVER_URL) {
        win.loadURL(process.env.VITE_DEV_SERVER_URL)
    } else {
        win.loadFile(path.resolve(__dirname, '../dist/index.html'));
    }
}

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

在vite.config.js文件中配置上面安装到的vite-plugin-electron插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'

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

默认情况下, electron 文件夹下的文件将会被构建到 dist-electron（注意：vite-plugin-electron 版本不同，构建的文件夹可能不同）

目前, Electron 尚未支持 “type”: “module”

在 package.json中，增加main字段，去掉type字段：

~~"type": "module",~~
"main": "dist-electron/main.js",

由于electron主进程是使用的node环境，默认情况下，Node.js 使用的是 CommonJS 模块规范，而 import 语句属于 ECMAScript 模块规范，两者不兼容。所以需要使用编译为 CommonJS 规范的dist-electron/main.js作为main属性的入口文件，否则会报es6语法错误。

接下来运行yarn dev：

可以看到创建了一个dist-electron文件夹，同时打开了一个桌面应用

控制台中文乱码

在主进程中打印带有中文字符会出现乱码：解决的方法也很简单

chcp 65001 是 Windows 系统下的一个命令，用于将控制台的代码页设置为 UTF-8 编码。在默认情况下，Windows 控制台使用的是 GBK 或者其他本地编码，导致在控制台中输出中文等非 ASCII 字符时可能会出现乱码。使用 chcp 65001 命令可以将控制台的代码页设置为 UTF-8 编码，以便正确显示中文等非 ASCII 字符。

在package.json中：现在就可以了。

4、打包应用

安装electron-builder

yarn add electron-builder -D

在package.json修改build命令

"build": "vite build && electron-builder"

增加electron-builder打包的相关配置：

"build": {
    "appId": "com.vite-electron.zxl",
    "productName": "MyEleectronApp",
    "copyright": "Copyright © 2023 zxl",
    "nsis": {
      "oneClick": false,   // 一键安装
      "allowToChangeInstallationDirectory": true  // 允许修改安装目录
    },
    "files": [
      "dist/**/*",   // 项目打包文件
      "dist-electron/**/*"   // electron入口文件
    ],
    "directories": {
      "output": "release/"   //  输出目录
    }
  }

现在一切就绪，执行yarn build进行打包

成功后会生成一个release文件夹，在里面就能看到打包好的exe安装包了。安装之后桌面上出现软件图标，打开后正常显示，大功告成！