Use electron shell vue to realize cross-platform desktop application

Needless to say what electron and vue are, the front end knows it
first, show a wave of demo portals

prerequisite

There must be a vue project, the old project is skipped

vue create hello-world

Transform the vue project

Create a new file in the root directory background.js, or it can be called another name, as the value package.jsonof main, paste the code

const { app, BrowserWindow, screen, ipcMain, nativeTheme } = require('electron')
const path = require('path')

// 热加载
try {
  require('electron-reloader')(module,{});
} catch (_) {}

const createWindow = () => {
  const win = new BrowserWindow({
    width: screen.getPrimaryDisplay().workAreaSize.width, // 直接显示最宽窗口，非最大化
    height: screen.getPrimaryDisplay().workAreaSize.height, // 直接显示最高窗口，非最大化
  })
  // console.log(process.env.NODE_ENV)
  if (process.env.NODE_ENV === 'development') {
    win.webContents.openDevTools() // 开发环境自动打开devtools
    win.loadURL('http://localhost:8090') // 开发环境加载本地服务
  } else {
    win.loadFile('./dist/index.html') // 非开发环境加载打包后的静态页面
  }
}

app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

modified node package.json_main

"main": "background.js"

install dependencies

"dependencies": {
    
    
	"core-js": "^3.6.5",
    "electron-squirrel-startup": "^1.0.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
}
"devDependencies": {
    
    
	"cross-env": "^7.0.2",
	"@electron-forge/cli": "^6.1.1",
	"@electron-forge/maker-deb": "^6.1.1",
	"@electron-forge/maker-rpm": "^6.1.1",
	"@electron-forge/maker-squirrel": "^6.1.1",
	"@electron-forge/maker-zip": "^6.1.1",
	"@vue/cli-plugin-babel": "~4.5.13",
	"@vue/cli-plugin-router": "~4.5.13",
	"@vue/cli-plugin-vuex": "~4.5.13",
	"@vue/cli-service": "~4.5.13",
	"@vue/compiler-sfc": "^3.0.0",
	"electron": "^24.3.1",
	"electron-reloader": "^1.2.3",
	"sass": "^1.26.5",
    "sass-loader": "^8.0.2",
}

Modify startup script

"scripts": {
    
    
   "dev":"vue-cli-service serve",
   "build": "vue-cli-service build",
   "start": "cross-env NODE_ENV=development electron-forge start",
   "package": "electron-forge package",
   "make": "cross-env NODE_ENV=production electron-forge make"
 },

The local running and packaging uses electron-forgethe plug-ins officially recommended by electron.

Development Process

Execute locally npm run dev, and execute again npm run start. background.jsIn the createWindow method, it is judged that it is a development environment, and the local service address is loaded. You will see the following window
insert image description here

Packaging process

Execution npm run buildfirst packages vue into a static page, and then executes it npm run make. In the createWindow method, it is judged whether it is a development environment or not, and the packaged static page is loaded.

Note: Applications on different platforms need to be packaged on the corresponding operating system