从零开始的electron开发-项目搭建

electron项目搭建

博客鸽了挺久了,最近准备更新一下electron的开发。

本文搭建基于vue cli提供的vue-cli-plugin-electron-builder进行脚手架搭建。

electron的优点和缺点已经有各种分析了,这里不再多述,如果你是一个前端开发,想把现有页面转化成桌面软件,并且能有win,mac,linux的版本,那么electron不失为一个好的选择,当然一个多端的框架优缺点都是很明显的,既然想快速开发那么就得舍弃点东西,比如体积大小,性能等等。

开发前的准备

说到底electron本质上就是一个基于Chromium的应用,通俗点说,这个桌面软件就是一个浏览器,我们写的东西在浏览器中展示,是不是一下子就回到熟悉领域了,那么在开发前你得知道前端三驾马车 HTML, CSS 和 JavaScript,涉及到一些文件等的处理的话那么会有些许node的知识。

安装

npm install -g @vue/cli
vue create electron-vue
# 自行选择vue版本,由于electron使用的是Chromium,那么我们可以不必考虑兼容性的问题,我这里直接选择vue3(看个人喜好)
cd electron-vue
vue add electron-builder
# 选择electron版本号,这里我选择的是`11.0.0`
# 安装完成之后会有`src/background.js`文件,`package.json`中会多出几条electron的build及serve命令
npm run electron:serve
# 稍等一会儿(Vue Devtools首次安装问题)会有一个桌面窗口出现,ok安装就完成啦,接下来我们对其进行改造。

说明

改造前说明一下:electron开发和我们普通的开发有所不同,它是有两种进程的:主进程和渲染进程

  • 主进程src/background.js:管理所有渲染进程(怎么配置桌面软件,怎么打开桌面软件,怎么相互通信等等)。
  • 渲染进程:说得直白点就是网页(就是打开我们单页的网页)

npm run electron:serve做了什么,其实就是类似先运行npm run serve启动一个网页的端口并生成一个实时打包的js,然后通过electron的命令指定启动的js,用主进程载入网页的端口。
通俗点来说,你可以理解为我们开发的桌面软件是一个浏览器,主进程就是设置这个浏览器的样式(图标,大小等等),渲染进程就是浏览器打开的网页。

改造

src目录改造

首先我们在src目录下新建两个文件夹src/mainsrc/renderer,这两个分别放主进程及渲染进程的文件,然后把src/background.js放入src/main中,然后重命名为index.jssrc下其他文件放入src/renderer中。
现在的结构如下:

├─src                          # 源码目录
│  ├─main                      # 主进程目录
│  │  └─index.js               # 主进程入口
│  └─renderer                  # 渲染进程文件夹
│      ├─assets
│      ├─components
│      ├─App.vue
│      └─main.js                # 渲染进程入口

添加vue.config.js

由于我们修改了默认的入口文件位置,我们应该配置对应的参数,
在根目录新建vue.config.js,添加

module.exports = {
  pluginOptions: {
    electronBuilder: {
      mainProcessFile: 'src/main/index.js', // 主进程入口文件
      rendererProcessFile: 'src/renderer/main.js', // 渲染进程入口文件
      mainProcessWatch: ['src/main'], // 检测主进程文件在更改时将重新编译主进程并重新启动
    }
  }
}

然后重新npm run electron:serve,看能否重新启动。

补充:如果是只打包单页electron的话这样配置没问题,但是这样的话想对web页面打包(npm run build)会有问题,因为我们把入口文件位置修改了。
这里我们可以通过设置pages来修改其入口文件,并且这样还可以打包多页

module.exports = {
   pages: {
    index: {
      entry: 'src/renderer/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'vue-cli-electron',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // loader: 'src/loader/main.js' // 多页loader页
  },
  pluginOptions: {
    electronBuilder: {
      mainProcessFile: 'src/main/index.js', // 主进程入口文件
      mainProcessWatch: ['src/main'], // 检测主进程文件在更改时将重新编译主进程并重新启动
    }
  }
}

注:如果添加了pages,请把electronBuilder里的rendererProcessFile删除,两个都是web页面的入口,是互斥的。
尝试分别运行web的serve、build及electron的serve、build,看是否能成功运行(打包可能会因为网络原因,下载electron包失败,如果未添加.npmrc请参考结尾补充)。

环境变量配置

vue cli可以通过--mode xx来读取.env.xx设置环境变量参考,在根目录新建

.env  # 本地开发
.env.dev  # 打包dev
.env.test  # 打包test
.env.prod  # 打包prod

.env:
NODE_ENV=development
VUE_APP_ENV=development
VUE_APP_APPID=com.electron.electronVueDEV
VUE_APP_PRODUCTNAME=electron开发
VUE_APP_VERSION=0.0.1
BASE_URL=/

注:.env 的NODE_ENV设置development,其余打包的请设置production
NODE_ENV: webpack运行的模式
VUE_APP_ENV:我们自己使用的环境变量(通过这个判断我们是什么环境),比如.env.test为VUE_APP_ENV=test,.env.prod为VUE_APP_ENV=production
VUE_APP_APPID:electron的appId配置,com.electron.electronVueDEV,com.electron.electronVueTEST,com.electron.electronVue
VUE_APP_PRODUCTNAME:electron的productName配置,electron开发,electron测试,···
VUE_APP_VERSION:electron的version配置

修改package.jsonscripts,删除原来的打包命令,新增:

web的打包:
"build:dev": "vue-cli-service build --mode dev",
"build:test": "vue-cli-service build --mode test",
"build:prod": "vue-cli-service build --mode prod",

electron的打包:
"build:dev:win32": "vue-cli-service electron:build --mode dev --win --ia32",
"build:dev:win64": "vue-cli-service electron:build --mode dev --win --x64",
"build:test:win32": "vue-cli-service electron:build --mode test --win --ia32",
"build:test:win64": "vue-cli-service electron:build --mode test --win --x64",
"build:prod:win32": "vue-cli-service electron:build --mode prod --win --ia32",
"build:prod:win64": "vue-cli-service electron:build --mode prod --win --x64",
"build:dev:mac": "vue-cli-service electron:build --mode dev --mac",
"build:test:mac": "vue-cli-service electron:build --mode test --mac",
"build:prod:mac": "vue-cli-service electron:build --mode prod --mac",

electron打包这里只配置了win32,win64,mac的打包,如果对其他模式的包有需求的请参考链接自行配置。

环境变量检测及打包配置

添加config配置

新增renderer/config/index.js

const env = process.env

const config = {
  host: '',
  baseUrl: ''
}

Object.assign(config, env)

// if (env.NODE_ENV === 'development') {
//   config.VUE_APP_ENV = 'test'
// }

if (config.VUE_APP_ENV === 'development') {
  config.host = 'http://192.168.148.174:8080'
} else if (config.VUE_APP_ENV === 'test') {
  config.host = 'http://192.168.148.175:8080'
} else if (config.VUE_APP_ENV === 'production') {
  config.host = 'http://192.168.148.176:8080'
}

export default config

本地开发切换环境,可以使用上面注释的方法修改,也可以直接修改.env文件的VUE_APP_ENV

打包配置

src/renderer/App.vue添加import cfg from '@/config',打印cfg

vue.config.js添加

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  chainWebpack: (config) => { // 由于我们修改了渲染进程目录,修改'@'的alias
    config.resolve.alias.set('@', resolve('src/renderer'))
  },
  builderOptions: {
    appId: process.env.VUE_APP_APPID,
    productName: process.env.VUE_APP_PRODUCTNAME,
    extraMetadata: {
      name: process.env.VUE_APP_APPID.split('.').pop(),
      version: process.env.VUE_APP_VERSION
    },
    asar: true,
    directories: {
      output: "dist_electron",
      buildResources: "build",
      app: "dist_electron/bundled"
    },
    files: [
      {
        filter: [
          "**"
        ]
      }
    ],
    extends: null,
    electronVersion: "11.3.0",
    extraResources: [],
    electronDownload: {
      mirror: "https://npm.taobao.org/mirrors/electron/"
    },
    dmg: {
      contents: [
        {
          type: "link",
          path: "/Applications",
          x: 410,
          y: 150
        },
        {
          type: "file",
          x: 130,
          y: 150
        }
      ]
    },
    mac: {
      icon: "public/icons/icon.icns"
    },
    nsis: {
      oneClick: false,
      perMachine: true,
      allowToChangeInstallationDirectory: true,
      warningsAsErrors: false,
      allowElevation: false,
      createDesktopShortcut: true,
      createStartMenuShortcut: true
    },
    win: {
      target: "nsis",
      icon: "public/icons/icon.ico",
      requestedExecutionLevel: "highestAvailable"
    },
    linux: {
      "icon": "public/icons"
    },
    publish: {
      provider: "generic",
      url: "http://127.0.0.1"
    }
  }
  ............
}

builderOptions是electron的打包配置,参考链接,之前打包的话由于网络原因,下载electron包可能会下载失败或特慢,这里配置electronDownload为淘宝源,本来electron的name及version是读取package.json里面的值的,这里使用extraMetadata把这两个值注入进package.json,其他配置可自行修改。

icons

打包是需要icons的,windows呢需要.ico,mac需要icns,你可以使用icofx进行生成(后续有时间的话会补充),这里呢我使用的是一个插件直接生成的

yarn add -D electron-icon-builder
package.json添加
"icons": "electron-icon-builder --input=./public/icons/icon.png --output=public --flatten",

在public下新建icons文件夹,再把你的icon.png(512*512)放在里面,运行npm run icons就会在icons里面生成对应的图片了。

最后:运行打包命令,分别打dev,test,prod包安装,打开软件查看打印的cfg是否正确。

补充

如果使用npm installyarn install出现错误时,一般来说是网络问题,先删除node_modules,然后在根目录新建.npmrc文件,添加electron_mirror=https://npm.taobao.org/mirrors/electron/,注意不要使用cnpm安装,可能会出现各种问题。

本文地址:链接
本文github地址:链接

You may also like...

1 Response

  1. DHclly说道:

    支持一下

发表评论

邮箱地址不会被公开。 必填项已用*标注