Getting started with Vite+Vue+Electron development of cross-platform desktop software, learn local development and concurrent package release in ten minutes

Preface

If you want to use Vite and Vue to develop cross-platform desktop software solutions, there are two software solutions: electron and tauri, but I personally prefer tauri. Unfortunately, electron has a bad reputation. Many interview requirements say: electron... This shows how backward this kind of company is. , there are obviously rockets, so we have to use bicycles. . . However, adhering to the concept that existence is reasonable, electron also has its own advantages, so let’s experience it today

The overall steps are divided into four

Install the environment, modify the configuration, start debugging locally, and package for release. Let you become familiar with the entire process within ten minutes.

The first step is to install the environment

You need a node environment, at least 14 or above, pretend you already have it. It is recommended to use nvm to manage multi-version nodes.

Then install the vite environment: Vite | the next generation of front-end tool chain

Then use vite to create a react or vue program: 

yarn create vite

After creation, enter the project and install the dependencies: 

 

Then install electron dependencies:

yarn add concurrently electron cross-env -D

Install electron packaging dependencies: and create packaging configuration files

yarn add --dev @electron-forge/cli
npx electron-forge import

 

After executing npx electron-forge import, a forge.config.js file will appear in your project root directory: 

The second step is to modify the configuration

When the dependencies are installed, we modify the package.json file and add the packaging script:

  "scripts": {
    "start": "npm run build && npm run electron:start",
    "dev": "concurrently -k \"vite\" \"npm run electron:dev\"",
    "build": "vite build",
    "preview": "vite preview",
    "electron:start": "cross-env IS_DEV=false electron-forge start",
    "electron:dev": "cross-env IS_DEV=true electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },

You also need to add several configurations at the script level of package.json:

  "main": "app/index.js",
  "description": "electron-vite-vue",
  "license": "MIT",
  "author": {"name": "1024小神", "email": "[email protected]"},
  "scripts": {
    "start": "npm run build && npm run electron:start",
    "dev": "concurrently -k \"vite\" \"npm run electron:dev\"",
    "build": "vite build",
    "preview": "vite preview",
    "electron:start": "cross-env IS_DEV=false electron-forge start",
    "electron:dev": "cross-env IS_DEV=true electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },

And delete a configuration: "type": "module", because this configuration will cause various problems such as startup failure and packaging failure: Error [ERR_REQUIRE_ESM]: require() of ES Module

Then create the startup file of electron: create an app directory, add index.js, the content is as follows:

const path = require('path')
const { app, BrowserWindow } = require('electron')
 
if (require('electron-squirrel-startup')) {
  app.quit()
}
 
const isDev = process.env.IS_DEV === 'true'
 
function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  })
  if (isDev) {
    mainWindow.loadURL('http://localhost:5173')
    mainWindow.webContents.openDevTools()
  } else {
    mainWindow.loadFile(path.join(__dirname, '../dist', 'index.html'))
  }
}
 
app.whenReady().then(() => {
  createWindow()
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})
 
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

 

The third step is to start locally

If nothing else, you will execute yarn run dev successfully.

The fourth step is to package and release

First package and compile the dist folder, and then execute package packaging. At this time, remember to modify the vite packaging configuration: base: "./" , otherwise the packaged program may open with a white screen because they cannot load the js file, so you need to set the path.

Execute first: yarn run build

Then execute: yarn run package

At this time, execute the packaged software: That’s it.

But the package size of 158M is prohibitive...

Finally, I recommend tauri development. It is only 3M in size. Isn’t it delicious? 

Let me share a software I developed with Tauri, which is similar to Baidu Cloud, but does not harmonize any files: The basics written with Tauri+Vue3+TypeScript+Pinia are similar to Baidu Cloud development templates, supporting internationalization and theme switching, picture audio and video playback, etc. Can be used as a picture bed and video bed_tauri vue_1024 Xiaoshen’s blog-CSDN blog