Vite+Vue+Electron开发跨平台桌面软件入门，十分钟学会本地开发并发包发布

阳光穿透心脏的1/2处 2023-10-15 21:40 3阅读 0赞

## 前言 ##

想使用vite和vue开发跨平台桌面的软件方案有electron和tauri两种，但是我个人更喜欢tauri，无奈electron名声大燥，面试要求里很多都写着：electron...可见这类公司多么落后，明明有火箭，非得用自行车。。。但是呢，又秉持着存在即合理的理念，electron也有自己的优势，所以今天就来体验一下吧

## 整体步骤分为四个 ##

安装环境，修改配置，本地启动调试，打包发布。让你十分钟之内熟悉整个流程。

## 第一步，安装环境 ##

需要node环境，至少14以上，假装你已经有了。推荐使用nvm管理多版本node。

然后安装vite环境：Vite | 下一代的前端工具链

然后使用vite创建一个react或者vue程序：

yarn create vite

创建完成后，进入项目并安装依赖：

![7d367a12ef324c04897ef9cc759ec73b.png][]

然后安装electron依赖：

yarn add concurrently electron cross-env -D

![703f01ea530b447a9a0a4fa84f8a3cfe.png][]

安装electron打包依赖：并创建打包配置文件

yarn add --dev @electron-forge/cli
    npx electron-forge import

![3a6dbefae2f346178b9729d87a52d78d.png][]

执行完npx electron-forge import后，你的项目根目录会出现一个forge.config.js文件：

![53fd9ab27a374f7d9e55103fe78aeafd.png][]

## 第二步，修改配置 ##

当依赖安装完成后，我们修改package.json文件，添加打包脚本：

"scripts": {
        "start": "npm run build && npm run electron:start",
        "dev": "concurrently -k \"vite\" \"npm run electron:dev\"",
        "build": "vite build",
        "preview": "vite preview",
        "electron:start": "cross-env IS_DEV=false electron-forge start",
        "electron:dev": "cross-env IS_DEV=true electron-forge start",
        "package": "electron-forge package",
        "make": "electron-forge make"
      },

还需要在package.json的script同级添加几个配置：

"main": "app/index.js",
      "description": "electron-vite-vue",
      "license": "MIT",
      "author": {"name": "1024小神", "email": "15670339118@163.com"},
      "scripts": {
        "start": "npm run build && npm run electron:start",
        "dev": "concurrently -k \"vite\" \"npm run electron:dev\"",
        "build": "vite build",
        "preview": "vite preview",
        "electron:start": "cross-env IS_DEV=false electron-forge start",
        "electron:dev": "cross-env IS_DEV=true electron-forge start",
        "package": "electron-forge package",
        "make": "electron-forge make"
      },

> 并且删除一个配置："type": "module",因为这个配置会导致你启动失败和打包失败等各种问题：Error \[ERR\_REQUIRE\_ESM\]: require() of ES Module

然后创建electron的启动文件：创建一个app目录，添加index.js，内容如下：

const path = require('path')
    const { app, BrowserWindow } = require('electron')
     
    if (require('electron-squirrel-startup')) {
      app.quit()
    }
     
    const isDev = process.env.IS_DEV === 'true'
     
    function createWindow() {
      const mainWindow = new BrowserWindow({
        width: 800,
        height: 600
      })
      if (isDev) {
        mainWindow.loadURL('http://localhost:5173')
        mainWindow.webContents.openDevTools()
      } else {
        mainWindow.loadFile(path.join(__dirname, '../dist', 'index.html'))
      }
    }
     
    app.whenReady().then(() => {
      createWindow()
      app.on('activate', function () {
        if (BrowserWindow.getAllWindows().length === 0) {
          createWindow()
        }
      })
    })
     
    app.on('window-all-closed', function () {
      if (process.platform !== 'darwin') {
        app.quit()
      }
    })

## 第三步，本地启动 ##

不出意外的话，你执行 yarn run dev 就会成功执行了![2633ea8157bf4ad09f30fef9b4386ade.png][]

##  ##

## 第四步，打包发布 ##

先打包编译出dist文件夹，然后再执行package打包。**此时记得修改vite打包配置： base： "./"** ，不然打包后的程序打开可能是白屏，因为他们加载不到js文件，需要设置一下路径就可以了。

先执行：yarn run build![335f1138c9a44fea865c4b2d5699fed5.png][]

再执行：yarn run package

![adf0d694dc1848d58649307171e85a8f.png][]

这个时候再执行打包后的软件：就可以了。![a484b01615ca4453abbec7144023763e.png][]

但是这158M的包大小，让人望而却步啊.............

最后还是推荐tauri开发，仅3M大小啊，不香吗

分享一个我用Tauri开发的一个软件，类似百度云，但是不和谐任何文件：[用Tauri+Vue3+TypeScript+Pinia写的基础类似百度云开发模板，支持国际化和主题切换，图片音视频播放等，可做图床视频床使用\_tauri vue\_1024小神的博客-CSDN博客][Tauri_Vue3_TypeScript_Pinia_tauri vue_1024_-CSDN]

[7d367a12ef324c04897ef9cc759ec73b.png]: https://img-blog.csdnimg.cn/7d367a12ef324c04897ef9cc759ec73b.png
[703f01ea530b447a9a0a4fa84f8a3cfe.png]: https://img-blog.csdnimg.cn/703f01ea530b447a9a0a4fa84f8a3cfe.png
[3a6dbefae2f346178b9729d87a52d78d.png]: https://img-blog.csdnimg.cn/3a6dbefae2f346178b9729d87a52d78d.png
[53fd9ab27a374f7d9e55103fe78aeafd.png]: https://img-blog.csdnimg.cn/53fd9ab27a374f7d9e55103fe78aeafd.png
[2633ea8157bf4ad09f30fef9b4386ade.png]: https://img-blog.csdnimg.cn/2633ea8157bf4ad09f30fef9b4386ade.png
[335f1138c9a44fea865c4b2d5699fed5.png]: https://img-blog.csdnimg.cn/335f1138c9a44fea865c4b2d5699fed5.png
[adf0d694dc1848d58649307171e85a8f.png]: https://img-blog.csdnimg.cn/adf0d694dc1848d58649307171e85a8f.png
[a484b01615ca4453abbec7144023763e.png]: https://img-blog.csdnimg.cn/a484b01615ca4453abbec7144023763e.png
[Tauri_Vue3_TypeScript_Pinia_tauri vue_1024_-CSDN]: https://xiaoshen.blog.csdn.net/article/details/131132910