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

前言

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

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

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

俄罗斯方块项目在这：

https://download.youkuaiyun.com/download/m0_73459939/89589427https://download.youkuaiyun.com/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"
  },
  "devDepende