Electron+vue develops desktop applications, problems encountered during development and solutions

Development Framework: Electron , Vue

1. Nodejs version problem

Due to the version and packaging issues of electron-builder and webpack, the latest nodejs version cannot be used, and v16 is required. Download address: https://nodejs.org/en/blog/release/v16.13.0

2. Create vue project command

To create a Vue project, do not use the commands in the Vue official website tutorial. Use the following commands:

vue create project-name

After executing the command, select the vue3 version.

3. Install the electron-builder plug-in

Integrate electron using electron-builder.

Excuting an order:

vue add electron-builder

After executing the command, select 13.0.0 when selecting the version link.

4. Background.js code modification

If you use the require method to introduce modules in your project, an error will be reported and you need to modify the src/background.js code.

5. Start running the project

Start command

npm run electron:serve

6. Packaging projects

Packaging command

npm run electron:build

The packaged files are in the electron-deom/dist_electron folder.

7. Configure the application window title bar icon

Create a resources folder and put the ICO icon. To generate an ICO icon, use Online tool to generate transparent ICO icons.

Then modify the src/background.js code to configure the application icon.

8. Configure packaging information and packaging icons

Modify vue.config.js

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack');
module.exports = defineConfig({
  runtimeCompiler: true,
  transpileDependencies: true,
  pluginOptions: { 
    electronBuilder: {
      nodeIntegration: true,
      webSecurity: false,
      builderOptions: {
        productName: `Electron demo`,
        appId: 'net.toollist.electrondemo',
        asar: true,
        linux: {
          target: ['deb'],
          category: 'Utility',
          icon: './resources/icons/icon'
        },
        mac: {
          icon: './resources/icons/icon.icns'
        },
        win: {
          target: [{
            target: 'nsis'
          }],
          icon: './resources/icons/icon.ico'
        },
        nsis: {
          oneClick: false,
          allowToChangeInstallationDirectory: true,
          perMachine: true,
          allowElevation: true,
          runAfterFinish: true,
          createDesktopShortcut: true,
          createStartMenuShortcut: true,
          deleteAppDataOnUninstall: true,
        },
        extraResources: {
          // Copy the static files to the specified location, otherwise there will be a problem that the resources cannot be found after packaging. Copy the entire resources directory to the root directory of the release.
          // How to obtain static resource path：process.env.NODE_ENV !== 'production'?'./resources/xxx':process.resourcesPath + '/xxx'
          from: './resources/',
          to: './'
        }
      }
    }
  }
})

Then execute the packaging command, and we have seen that the application icon has been changed.

Once everything is ready, you can develop the Electron project by developing a vue project.