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 -V
orvue --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)