Vuecli+electron case analysis

This article introduces the relevant knowledge of "vuecli+electron case Analysis". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Create a vue project with vuecli

Vue create electron-vue-my

Install electron-builder

Vue add electron-builder

/ / there are a lot of things to install, pay attention to the network

/ / you can install cnpm install-- save-dev electron-chromedriver first

/ / I reported a lot of mistakes during the installation, and then I built a new project the next day, and the installation was successful at once

After the installation is successful, run npm run electron:serve. If the following page appears, it is successful.

Image.png

Package desktop applications

/ / just execute the following command

Npm run electron:build

/ / you will find an exe in the dist_electron directory, and double-clicking the exe will execute the installer.

/ / there is also a win-unpacked folder, which contains the mode we packed earlier. Click electron-vue-my.exe in it and you can run it.

Electron configuration

The general configuration is basically in background.js.

Cancel cross-domain restrictions win = new BrowserWindow ({width: 800,600, webPreferences: {nodeIntegration: true, webSecurity: false}}) set window icon

Prepare the windows and macOS icons.

Windows: app.ico minimum size: 256x256

MacOS: app.png or app.icns minimum size: 512x512

Put the icon file in the public directory:

| |-/ dist_electron |-/ public |-app.icns |-app.ico |-app.png |-favicon.ico |-index.html |-/ src (abbreviated) |-.editorconfig |-.eslintrc.js |-.gitignore |-babel.config.js |-package.json |-package-lock.json |-README.md icon generation |

Install components, cnpm install-- save-dev electron-icon-builder

Get your icon ready and put it on / public/icon.png

Add a new command under the scripts of package.json

"electron:generate-icons": "electron-icon-builder-input=./public/icon.png-output=build-flatten"

Execute, npm run electron:generate-icons, generate a series of icons and copy them to the public directory.

Packaged configuration

Modify the vue.config.js, and here I will release the modified part:

Module.exports = {pluginOptions: {electronBuilder: {builderOptions: {"appId": "com.wangdaodao.app", "productName": "AppDemo", / / project name Also generated installation file name "copyright": "Copyright ©2020", / / copyright information "directories": {"output": ". / dist_electron" / / output file path}, "win": {/ / win related configuration "icon": ". / public/icons/icon.ico", / / icon The current icon is in the root directory Note that there are two pits "target": [{"target": "nsis", / / using nsis to create the installer "arch": ["x64" / / 64-bit "ia32" / / 32-bit]}}, "mac": {"icon": ". / public/icons/icon.icns"}, "nsis": {"oneClick": false / / can you install "allowElevation": true with one click, / / allow you to request promotion. If false, the customer must restart setup with elevated privileges. "allowToChangeInstallationDirectory": true, / / allows you to modify the installation directory "installerIcon": ". / public/icons/icon.ico", / / installation icon "uninstallerIcon": ". / public/icons/icon.ico", / / uninstall icon "installerHeaderIcon": ". / public/icons/icon.ico", / / installation header icon "createDesktopShortcut": true / / create desktop icon "createStartMenuShortcut": true, / / create start menu icon "shortcutName": "AppDemo", / / icon name},}

Package APP

Npm run electron:build

Delete the dist_electron folder, re-execute the packaging command, npm run electron:build, and you will find that the icon of the application has changed.

Finally, the product after build is generated in the dist_electron directory.

/ dist_electron |-/ bundled (abbreviated) |-/ win-unpacked