1. Create a VUE project

Note:

  • Vue-cli 3.x or later must be used
  • Histroy mode cannot be used
  • No lazy loading

2. Introduce dependencies

yarn add -D electron electron-builder vue-cli-plugin-electron-builder
vue add electron-builder
Copy the code

3. Add the script

package.json :

"electron:serve": "vue-cli-service electron:serve"."electron:build": "vue-cli-service electron:build"
Copy the code

4. Create an import file

Create background-js in the SRC directory

import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
constisDevelopment = process.env.NODE_ENV ! = ='production'

protocol.registerSchemesAsPrivileged([
  { scheme: 'app'.privileges: { secure: true.standard: true}}])async function createWindow () {
  const win = new BrowserWindow({// Default window size and some configuration items
    width: 800.height: 600.webPreferences: { // Enable nodeJS environment (default disabled after electron upgrade to 5.0)
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
    }
  })
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if(! process.env.IS_TEST) win.webContents.openDevTools()// Whether to open the console
  } else {
    createProtocol('app')
    win.loadURL('app://./index.html')// Open a link or file
  }
}
app.on('window-all-closed'.() = > {
  if(process.platform ! = ='darwin') {
    app.quit()// Kill the process, that is, close the window
  }
})

app.on('activate'.() = > {/ / activation
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
app.on('ready'.async() = > {if(isDevelopment && ! process.env.IS_TEST) {try {
      await installExtension(VUEJS_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message'.(data) = > {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM'.() = >{ app.quit() }) } }Copy the code

5. Import the import file

package.json :

"main": "background.js"
Copy the code

6. Run the project

yarn electron:serve
Copy the code

7. Package projects

yarn electron:build
Copy the code

Possible problems and solutions

View the VUe-CLI versionvue -Vorvue --version

If the vuE-CLI version is earlier than 3.x, an error will be reported:

‘vue-cli-service’ is not an internal or external command, nor is it a runnable program or batch file…

installVueDevtools InstallVueDevtools is the method to install and display vue-devTools, which has been isolated and needs to be introduced in a different way

import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
Copy the code

Histroy If the route is in Histroy mode, the initial page cannot be displayed after the route is packaged and blank is displayed after the route is refreshed. I’ll just change it to hash.

Cross domain problem method 1: back-end solution 2: Set webSecurity: false

const win = new BrowserWindow({// Default window size and some configuration items
    width: 800.height: 700.webPreferences: { // Enable nodeJS environment (default disabled after electron upgrade to 5.0)
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      webSecurity: false}})Copy the code

Method 3: setProxy (tried, but didn’t work)