在 Vue 中使用 Electron

electron-builder 配置

在项目根目录下打开终端：

vue add electron-builder

安装成功后，项目结构如下:

main.js 为 vue 主文件

background.js 为 electron 的主进程文件

::: tip 当我们在渲染进程中使用 electron 相关 api。需在 vue.config.js 新增以下内容: :::

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true
    }
  }
};

打包

npm run electron:build

你可能会发现下载插件的时候非常慢，你可以通过以下方式提速：

npm config set electron_mirror=https://npm.taobao.org/mirrors/electron/
npm config set electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/

打包成功后

进入项目文件夹 dist_electron 中，electron_robot_client Setup 0.1.0.exe 为项目安装程序

直接使用 electron-vue

官方文档

# 安装 vue-cli 和 脚手架样板代码
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# 安装依赖并运行你的程序
cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev

当simulatedgreg/electron-vue 下载出错时，可以采取以下方法：

::: tip 将simulatedgreg/electron-vue下载到本地 :::

  1. 将 Electron-vue 项目先下载下来 国内码云地址：

https://gitee.com/mirrors/electron-vue

  1. 复制项目的根路径

  2. 使用本地simulatedgreg/electron-vue创建

vue init D:\electron-vue my-project