使用vue-cli-plugin-electron-builder创建electron+vue项目

一、nvm环境

运行以下命令确认是否安装了nvm

nvm -v

本篇文章需要使用nvm将node版本切换至16.19.0版本，运行以下命令安装和切换版本

nvm install 16.19.0
nvm use 16.19.0

二、安装vue-cli、yarn

运行以下命令全局安装vue-cli

npm install -g @vue/cli

运行以下命令全局安装yarn

npm install -g yarn

修改yarn镜像(查看镜像网站)

yarn config set registry https://registry.npmmirror.com

三、使用vue项目管理器创建项目

运行以下代码打开项目管理器，你的浏览器会打开项目管理器界面

vue ui

1. 点击左下角房子图标回到首页(首页链接可能会像这样：http://localhost:8000/project/select)
2. 点击创建
3. 修改一个合适的路径放置新项目
4. 点击最下方的"+在此创建新项目"
5. 项目文件夹，输入项目名，输入my-electron-vue
6. 点击最下方的下一步
7. 点击选择默认第一个，Default (Vue 3)
8. 点击最下方的"创建项目"
9. 等待项目创建完成

四、使用vue项目管理器安装插件

1. 点击左侧插件
2. 点击最右侧的"+添加插件"
3. 搜索并选中"vue-cli-plugin-electron-builder"
4. 点击最下方的"⭳安装 vue-cli-plugin-electron-builder"
5. 等待安装完成
6. 点击最下方的"✓ 完成安装"(一定要点)
7. 安装时间较长，等待安装完成

五、进入my-electron-vue目录，启动electron

在my-electron-vue目录下运行以下命令

yarn run my-electron-vue

启动成功了！

关闭electron窗口

六、安装VueDevtools，解决Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT

启动时出现以下错误是因为Vue Devtools安装不上，寻找其他途径安装上就可以了

Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times
Failed to fetch extension, trying 0 more times
Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT

——1.下载VueDevtools放进项目文件夹中

1. 方法1(版本陈旧，第三方提供，总体不建议)
   网上搜到的浏览器插件crx文件或者xpi文件直接当作压缩包解压至my-electron-vue文件夹中，使用electron的session识别插件
2. 方法2(建议)
   把Chrome或Edge安装好的插件扒下来(能连上Chrome商店就用Chrome的，连不上就用Edge的或者用FireFox的)
   来自Chrome应用商店的Vue.js devtools
   来自Edge外接程序的Vue.js devtools
   来自Firefox附加组件的Vue.js devtools(点击"下载文件"的小字，任意浏览器都能下载)
   安装后可能的位置(浏览器安装完插件后用Everything软件搜插件ID(长串乱码就是ID))
   %localappdata%\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd
   %localappdata%\Microsoft\Edge\User Data\Default\Extensions\olofadcdnkkjdfgjcmjaadnlehnnihnl
   插件安装位置下只有一个文件夹，名称类似"6.4.5_0"，将这个文件夹复制到my-electron-vue目录下
   并改名为"VueDevtools_6.4.5_0_Edge"(我是从Edge里扒下来的，所以改名带Edge)
   路径是这样：.\my-electron-vue\VueDevtools_6.4.5_0_Edge

——2.让Electron知道VueDevtools的存在

修改该文件.\my-electron-vue\src\background.js即可，以下仅展示修改部分
修改前(第一处)

import { app, protocol, BrowserWindow } from 'electron'

修改后(第一处)

import { app, protocol, BrowserWindow } from 'electron'
import { session } from "electron";
import path from "path";

修改前(第二处)

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS3_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

修改后(第二处)

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    const VueDevtoolsPath = path.join(__dirname, "../VueDevtools_6.4.5_0_Edge");
    await session.defaultSession.loadExtension(VueDevtoolsPath);
  }
//   if (isDevelopment && !process.env.IS_TEST) {
//     // Install Vue Devtools
//     try {
//       await installExtension(VUEJS3_DEVTOOLS)
//     } catch (e) {
//       console.error('Vue Devtools failed to install:', e.toString())
//     }
//   }
  createWindow()
})

——其他.让Vue Devtools适应electron(因为低版本electron是个残疾版chromium)

注意：electron高版本可以正常识别插件，更建议升级electron来解决，此处可以跳过不看
编辑这个文件.\my-electron-vue\VueDevtools_6.4.5_0_Edge\manifest.json

1. electron13.0.0(chrome91.0.4472.69)使用ManifestV2时(浏览器插件的一种版本)：
   删除browser_action、update_url属性，防止electron读取并报错
2. 在未来，electron-version 13.0.0(chrome-version 91.0.4472.69)使用ManifestV3时：
   删除action、update_url属性，可能要删除content_security_policy，防止electron读取并报错
3. 删除该文件夹.\my-electron-vue\VueDevtools_6.4.5_0_Edge_metadata(该目录是浏览器厂商添加进插件中的验证文件，electron会误读为系统隐藏文件)

六点一、安装VueDevtools独立版(只使用插件或独立其中一个即可)

生产环境不要保留VueDevtools独立版提供的script标签或相关修改！

1. 在项目根目录新建文件夹，名为VueDevtools_Standalone，像这样：.\my-electron-vue\VueDevtools_Standalone
2. 在VueDevtools_Standalone目录中运行以下命令安装VueDevtools独立版(此处使用了华为镜像)

npm install --save-dev @vue/devtools --registry=https://mirrors.huaweicloud.com/repository/npm/

等待安装完成，以下错误就是网络不好(独立版界面是electron做的，不容易下载就换镜像多安装几次)

Error: Electron failed to install correctly, please delete node_modules/electron and try installing again

4. 在VueDevtools_Standalone目录中运行以下命令启动VueDevtools独立版

node .\node_modules\@vue\devtools\bin.js

(如果全局安装了VueDevtools独立版，可以直接运行vue-devtools这个命令)
启动完成

要加载VueDevtools独立版，就要卸载其他位置的VueDevtools
所以在.\my-electron-vue\src\background.js中注释掉"loadExtension"这行代码

// await session.defaultSession.loadExtension(VueDevtoolsPath);

编辑.\my-electron-vue\public\index.html，将VueDevtools独立版窗口中显示的script标签复制进去
可以将script标签放在app旁边，类似以下代码(只显示部分)

<script src="http://localhost:8098">script>
<div id="app">div>

在my-electron-vue项目中运行以下命令启动electron

yarn run electron:serve

electron启动成功后，回头查看VueDevtools独立版已经成功显示调试界面了

生产环境不要保留VueDevtools独立版提供的script标签或相关修改！

七、升级electron最新版(此处是13.0.0升级到22.0.0)

——1.升级和启动

在my-electron-vue项目中运行以下命令升级electron

yarn add --dev electron

然后启动electron

yarn run electron:serve

——2.一些启动错误，Manifest和background.js

1.出现以下提示先不要管：

Manifest version 2 is deprecated, and support will be removed in 2023. See https://developer.chrome.com/blog/mv2-transition/ for more details.

这需要VueDevtools插件升级，不用你操心(VueDevtools议题、VueDevtools的manifest-v3分支)
2.出现以下提示：

DeprecationWarning: Invalid 'main' field in 'C:\Users\BEIBEI\Desktop\my-electron-vue\dist_electron\package.json' of 'background.js'. Please either fix that or report it to the module author

修改这个配置文件解决.\my-electron-vue\vue.config.js
修改前(只显示修改部分)

module.exports = defineConfig({
  transpileDependencies: true
})

修改后(只显示修改部分)

module.exports = defineConfig({
  pluginOptions: {
    electronBuilder: {
      chainWebpackMainProcess: (config) => {
        config.output.filename((file) => {
          if (file.chunk.name === "index") {
            return "background.js";
          } else {
            return "[name].js";
          }
        });
      },
    },
  },
  transpileDependencies: true
})

——3.再次启动

再次启动electron

yarn run electron:serve

八、打包

这个打包步骤特别依赖github文件的下载，保证github连接畅通(UU加速器学术资源加速)

1. 编辑文件.\my-electron-vue\package.json，添加描述和作者
   编辑前(只显示部分内容)

  "name": "my-electron-vue",

编辑后(只显示部分内容)

  "name": "my-electron-vue",
  "description": "my electron+vue project",
  "author": "author",

2. 添加图标，添加图标的操作移步到第九步，可以跳过
3. 在my-electron-vue项目中运行以下命令打包项目

yarn run electron:build

等待打包完成
安装程序生成位置在.\my-electron-vue\dist_electron\my-electron-vue Setup 0.1.0.exe
免安装程序生成位置在.\my-electron-vue\dist_electron\win-unpacked

九、自定义程序图标

提前准备一个png格式的图片，位置放在这里：.\my-electron-vue\public\ve.png
访问Github下载软件，点击链接
解压放到my-electron-vue项目根目录，像这样：.\my-electron-vue\electron-icon-builder.exe
打开软件，Input输入"./public/icon.png"，Output不要动，勾选Flatten，点击Confirm生成图标，如图

删除dist_electron文件夹(不操作也许影响打包)
在my-electron-vue项目中再次运行以下命令打包项目

yarn run electron:build

其他：因Windows系统缓存等原因，图标已经修改成功但是无法分辨，可以使用EXE图标提取工具查看

未解决、自行编译vuedevtools的manifest-v3分支处理version 2 is deprecated

(该分支暂时无法正常使用，例如编译到shell-chrome就失败)
你可以尝试以下操作(注意：必须使用yarn)
git clone -b manifest-v3 https://github.com/vuejs/devtools.git，yarn install，yarn run build，目录packages\shell-chrome删除node_modules就可以当插件用了