vite+vue+electron的创建并使用electron-build打包

前言

昨天用Vue+vite和electron做了一个俄罗斯方块游戏，然后写完踩了半天坑在打包上，今天把整个流程总结一下，因为只需要多点一个配置，一个vue项目就能变成一个app，非常大提高开发效率，实现了学会vue能用uniapp做安卓、ios、小程序，也能用electron做桌面应用。

本文无废话无原理，也是方便我以后忘了也能看。

四处搜索+gpt+文档得来的结果，为了演示我重新建了一个项目。

俄罗斯方块项目在这：

https://download.csdn.net/download/m0_73459939/89589427https://download.csdn.net/download/m0_73459939/89589427这是setup.exe文件，代码请看下篇文章。

创建项目并配置electron

创建vue项目就不多说了，反正就是用Vite创建，具体可以看我上一篇文章，但是需要注意的是打包的时候路由需要切换成哈希（带#的，等会打包再说）。

创建完项目后首先是下载electron，文档里面给的是yarn和npm，yarn我没试验过，反正npm和pnpm都是下载不了的，不知道是不是镜像源的问题，但是我用cnpm就没这个问题。

create完项目之后

npm i cnpm
cnpm install
cnpm run dev

然后下载election。

cnpm install electron --save-dev

然后开始配置electron的东西。

在package.json里面修改，好像author和description是需要改的，但是这个问题不大。就加几个注释里面的，其他创建项目完都是有的。

{
  "name": "election_demo",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "main": "main.js",//必须加上的
  "description": "Russia cubes",//文档要求加上
  "author": "Ye",//文档要求加上
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "start": "electron ."//这个必须加上
  },
  "dependencies": {
    "cnpm": "^9.4.0",
    "vue": "^3.4.29",
    "vue-router": "^4.3.3"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
    "electron": "^31.3.0",
    "vite": "^5.3.1"
  }
}

接下来创建main.js（注意！！！不要在src文件夹下创建，要在和src同级的）

main.js


import { app, BrowserWindow } from 'electron'
import path from 'path'
import { fileURLToPath } from 'url'
import { dirname } from 'path'
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

function createWindow() {
    console.log('Creating window...')
    const mainWindow = new BrowserWindow({
        width: 950,
        height: 850,
        title: "Russia cubes",
        icon: '@/assets/logo.ico',
        autoHideMenuBar: true,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            devTools: false,// 禁用开发者工具
            webSecurity: false
        },
        // 加载 index.html

    })
    // 加载开发服务器提供的 URL（如果使用）
    const devServerUrl = 'http://localhost:5173' // 根据你的开发服务器配置进行调整
    mainWindow
         .loadURL(devServerUrl)//还没打包之前用url，打包之后用index
        //.loadFile('./dist/index.html')
        .then(() => {
            console.log('Loaded URL:', devServerUrl)
        })
        .catch((err) => {
            console.error('Failed to load URL:', err)
        })

    // 删除或注释掉打开开发者工具的代码
    mainWindow.webContents.openDevTools();
}

app.whenReady().then(() => {
    console.log('App is ready')
    createWindow()

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

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

因为冲突不大，所以我基本是在vue里面写用h5去debug，把这里的开发者工具给禁用掉了。

然后创建preload.js，一样在main.js同级。

preload.js

window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
   
    for (const dependency of ['chrome', 'node', 'electron']) {
      replaceText(`${dependency}-version`, process.versions[dependency])
    }
  })

如果你问我为什么这样写，我也不知道，四处cv来的，能用。

到现在项目就能跑起来了。

cnpm run dev
cnpm run start

然后开发的活就各自干，两个之间互不冲突。

打包vue并配置electron

首先是打包文件(还没到打包成exe)

cnpm run build

然后有了一个dist文件之后就可以把main.js里面的load换掉了。

 路由也要换一下，一般我们是用createWebHistory，但是这里我们得换成createWebHashHistory，不然就会一片空白或者404（如果做了*返回404页面的话）。

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),//加上这一句或者改成createWebHashHistory
  routes: [
    {
      path: '/',
      component: () => import('@/views/Home/HomePage.vue')
    }
  ]
})

export default router

然后在vite.config.js里面加上这一句

全部加上完成之后再cnpm run build一次，因为得把你改的这些打包进去。然后就可以实现启动h5和启动electron各自独立了。

启动electron

cnpm run start

好了，接下来就是打包exe了，坑最多的地方。

electron打包为exe

首先是下载electron-builder。注意-D不能丢掉，如果丢掉的话需要去package.json把    "electron-builder": "^24.13.3"从dependencies移动到devDependencies再cnpm install electron-builder -D一次。

cnpm install electron-builder -D

在package.json里面启动的地方加一行

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "start": "electron .",
    "exe-build": "electron-builder"//加上这一句
  },

然后这个时候运行进行打包。

cnpm run exe-build 

如果你是第一次的话，不用想太多，肯定是失败的，连接超时问题，开梯子、换镜像都一样。

根据你的错误提示，ctrl+链接可以直接下载（我下午配置过了，这里网上找几个图片，原理是一样的）。

图片来源：解决electron打包时，下载超时导致失败_electron打包时下载eletron超时-CSDN博客

其实是有三张图的，第一个是说electron下载失败，你可以直接ctrl这个链接下载，也可以记住版本后去github上下载。注意要对上版本。

Releases · electron/electron (github.com)https://github.com/electron/electron/releases这个是下载electron的地址，光下载electron还不够，还需要去找到对应版本的SHASUMS256.txt，然后一起放在C:\Users\Ye\AppData\Local\electron\Cache的地方。

第一个报错就解决了。

然后第二个和第三个（就是上面两张图片）来这里下载，也就是winCodeSign和nsis

Releases · electron-userland/electron-builder-binaries (github.com)https://github.com/electron-userland/electron-builder-binaries/releases?after=winCodeSign-2.2.0然后也是一样创建各自的文件夹和各自需要的东西，注意的是，这里不是C:\Users\Ye\AppData\Local\electron\Cache了，而是C:\Users\Ye\AppData\Local\electron-builder\Cache了。

winCodeSign只需要下载一项就行。而nisi有两项，有一个在下载地址的第二页。

在三个都下载好之后就会发现我们打包没问题了，也能成功出现exe文件了。

但是！不要高兴太早，现在去打开exe肯定就是一片空白。因为找不到文件，我感觉是没有打包进去。

我们再次来到package.json加上这段代码：

  "build": {
    "appId": "Ye.russiacubes",
    "files": [
      "dist/**/*",
      "main.js",
      "preload.js",
      "index.html",
      "src/**/*",
      "node_modules/**/*",
      "package.json"
    ],
    "asarUnpack": [
      "main.js",
      "preload.js"
    ],
    "win": {
      "icon": "src/assets/icon.ico",
      "target": [
        "nsis"
      ]
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    }
  },

 在这个层级

 然后我们再次打包，运行一次cnpm run exe-build。

成功了！