Blogpigeon has been around for a long time and is about to update the development of electron.

In this paper, the scaffolding was built based on the Vue-CLI-plugin-electron – Builder provided by VUE CLI.

The advantages and disadvantages of Electron have been analyzed in various ways, but I won’t go into much detail here, but if you’re a front-end developer who wants to convert existing pages into desktop software and have Windows, MAC, and Linux versions available, then Electron is a good choice. Of course, the advantages and disadvantages of a multi-terminal framework are obvious. If you want to develop fast, you have to give up some things, such as size, performance, etc.

Preparation before development

Electron is essentially a Chromum-based app. In general terms, the desktop software is a browser. We write things in the browser, and it’s back to familiar territory. There’s a little bit of node knowledge if you’re dealing with files and so on.

The installation

NPM install -g@vue /cli vue create electron-vue # self select vUE version, because electron uses Chromium, so we can not consider the compatibility problem, CD electron-vue vue add electron- Builder In this case, I chose '11.0.0' and 'SRC /background.js' after the installation, NPM run electron:serve # after a few seconds (Vue Devtools first install problem), a desktop window will appear, ok, the installation is complete. And then we're going to reinvent it.Copy the code

instructions

Before the revamp, the Electron development is different from our normal development in that it has two processes: the main process and the render process

  • The main SRC /background.js process manages all rendering processes (how to configure the desktop software, how to open the desktop software, how to communicate with each other, etc.).

  • Rendering process: To put it bluntly, it’s a web page (just open our single page)

NPM Run electron: What does NPM Run serve do? It is similar to running NPM Run Serve to start a web page port and generate a real-time package JS, then through the electron command specified to start JS, using the main process to load the web page port. In layman’s terms, you can think of the desktop software we develop as a browser, the main process is to set the browser’s style (ICONS, sizes, etc.), and the render process is to open the web page.

transform

SRC directory modification

SRC /main, SRC /renderer, SRC /renderer, SRC /background.js, SRC /main, SRC /renderer Other files under SRC go into SRC /renderer. The current structure is as follows:

│ ├─assets │ ├─components │ ├─ app.vue │ ├─assets │ ├─components │ ├─ app.vue │ ├─assets │ ├─components │ ├─ app.vue │ ├─assets ├ ─main.jsCopy the code

Add the vue. Config. Js

Since we changed the default entry file location, we should configure the corresponding parameters, create vue.config.js in the root directory, and add

module.exports = { pluginOptions: { electronBuilder: { mainProcessFile: 'SRC /main/index.js', // main process entry file rendererProcessFile:' SRC /renderer/main.js', // Render process entry file mainProcessWatch: [' SRC /main'], // detects that the main process file changes and recompiles the main process and restarts the main process}}}Copy the code

Then restart NPM run electron: Serve to see if it can be restarted.

Add-on: this is fine if you only pack the electron single page, but it will be a problem if you want to pack the web page (NPM run build) because we changed the entry file location.

Here we can modify the entry file of pages by setting it up, and this also allows multiple pages to be packaged

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: }, pluginOptions: {electronBuilder: {mainProcessFile: 'SRC /main/index.js', // main process entry file mainProcessWatch: [' SRC /main'], // Detect the main process file changes and recompile the main process and restart the main process}}}Copy the code

Note: if you add pages, remove the rendererProcessFile from the electronBuilder. Both are portals to the web page and are mutually exclusive.

Try to run the Web serve and build and the electron serve and build respectively to check whether they can run successfully. (Downloading the electron package may fail due to network reasons. If the. NPMRC is not added, please refer to the supplement at the end.)

Environment Variable Configuration

Vue CLI can be read by –mode xx.env.xx Reference for setting environment variables, created in the root directory

Dev # Package dev.env.test # Package test.env.prod # Package prod.env: NODE_ENV = development VUE_APP_ENV = development VUE_APP_APPID = com. Electron., electronVueDEV VUE_APP_PRODUCTNAME = electron development VUE_APP_VERSION=0.0.1 BASE_URL=/ production NODE_ENV Webpack runs in the mode VUE_APP_ENV: Env. Test for VUE_APP_ENV=test,.env.prod for VUE_APP_ENV=production VUE_APP_APPID: The appId electron configuration, com. Electron. ElectronVueDEV, com. Electron., electronVueTEST com. Electron., electronVue VUE_APP_PRODUCTNAME: Electron productName configuration, electron development, electron test, VUE_APP_VERSION: version configuration of electronCopy the code

Modify package.json scripts to remove the original package command and add:

Web package: "build:dev": "vue-cli-service build --mode dev", "build:test": "Vue-cli-service build --mode test", "build:prod": "vue-cli-service build --mode prod", "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",Copy the code

The electron package only configes win32, Win64, and MAC packages. If you need other packages, please refer to the link to configure them.

Environment variable detection and packaging configuration

Add config configuration

New the 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 configCopy the code

The VUE_APP_ENV in the.env file can also be changed directly.

Packaging configuration

SRC /renderer/ app. vue Add import CFG from ‘@/config’ and print CFG

Vue. Config. Js added

const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports = { chainWebpack: (config) => {// since we changed the rendering process directory, change the alias of '@' to 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: {the provider: "generic", url: "http://127.0.0.1"}}... }Copy the code

BuilderOptions is the package configuration of electron, refer to the link. If the package is packaged before, the download of electron package may fail or be very slow due to network reasons. Configure electronDownload as Taobao source here. The extraMetadata is used to inject the values of the electron name and version into package.json. The other configurations are optional.

icons

Packaging is required for the ICONS, Windows need. Ico, need MAC icns, you can use to generate icofx (later have the time will be added), here I use is a plug-in directly generated

Yarn add -d electronic-icon-Builder package.json add "ICONS ": "electron-icon-builder --input=./public/icons/icon.png --output=public --flatten",Copy the code

From these ICONS, I will create a new folder under public and place your icon. PNG (512*512) inside it and run NPM to generate the images in the ICONS.

Finally: run the packaging command, respectively dev, test, prod package installation, open the software to check whether the printed CFG is correct.

supplement

If an error occurs when you use NPM install or Yarn install, it is generally a network fault. Delete node_modules and create an. NPMRC file in the root directory

electron_mirror=https://npm.taobao.org/mirrors/electron/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
Copy the code

Be careful not to install using CNPM as various problems may occur.

This article address: xuxin123.com/electron/cr…

This post is on Github