Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money

A brief introduction.

In Vite+Electron to quickly Build a VUE3 desktop application, we learned how to quickly build a VUE3 desktop application using Vite and Electron. However, the previously built application was just a simple version. For the sake of a better development experience, we certainly wanted dynamic module thermal overload (HMR) when developing Electron, not to mention vite’s fast loading speed.

So, following on from the project code completed in the previous article, let’s complete the dynamic module thermal overload feature in Vite and Electron development.

Source: github.com/Kuari/Blog/…

Series of articles:

  • Vite+Electron quickly build a VUE3 desktop application
  • Vite+Electron quickly build a VUE3 desktop application (ii) — dynamic module thermal overload
  • Vite+Electron quickly build a VUE3 desktop application (iii) — pack

2. Train of thought

The conclusion can be done using mainwindow.loadurl (

) in electron.

For dynamic module hot reload, both Webpack and Vite store the build content in memory, so we can’t use mainwindow.loadfile (‘dist/index.html’) to load the file.

However, simply changing this configuration is not enough. You need to use Vite to run the development server, which can run the dynamic module hot reload normally, while Electron directly loads the URL accessible to its development server, namely http://localhost:3000.

Three. Implementation steps

1. Edit the main. Js

Update mainwindow.loadfile (‘dist/index.html’) to mainwindow.loadurl (“http://localhost:3000”) and the updated file looks like this:

// main.js

// Controls the application lifecycle and creates modules for native browser Windows
const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  // Create a browser window
  const mainWindow = new BrowserWindow({
    width: 800.height: 600.webPreferences: {
      preload: path.join(__dirname, 'preload.js')}})/ / load index. HTML
  // mainwindow.loadfile ('dist/index.html') change this line to the following line to load the URL
  mainWindow.loadURL("http://localhost:3000")

  // Open the development tool
  // mainWindow.webContents.openDevTools()
}

// This program will be initialized at Electron
// when creating a browser window
// Parts of the API can only be used after the ready event is triggered.
app.whenReady().then(() = > {
  createWindow()

  app.on('activate'.function () {
    // Usually on macOS, when clicking the app icon in the Dock, if nothing else
    // Open the window, then the program will create a new window.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

Exit the program when all Windows are closed except macOS. Therefore, it is common for programs and they are in
For ICONS on the taskbar, they should remain active until the user exits using Cmd + Q.
app.on('window-all-closed'.function () {
  if(process.platform ! = ='darwin') app.quit()
})

// In this file, you can include the rest of the application code,
// It can also be split into several files and imported with require.

Copy the code

2. Edit vite. Config. Js

Modify the base file of vite.config.js, and the modified file is as follows:

// vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  base: ". /"./ / new
  plugins: [vue()]
})

Copy the code

3. Enable both the Vite and electron services

In order for Vite and Electron to work properly, you need to run Vite so that the url of its development server can be accessed properly, and then enable Electron to load the URL.

Two libraries need to be installed:

  • concurrently: blocks running multiple commands,-kThe parameter is used to clear other existing or dead processes
  • Wait-on: Wait resource, used to wait for the URL to be accessible

Let’s start with the installation.

yarn add -D concurrently wait-on
Copy the code

Then update the package.json file and add two new commands to scripts:

  "scripts": {
    "electron": "wait-on tcp:3000 && electron ."."electron:serve": "concurrently -k \"yarn dev\" \"yarn electron\""
  },
Copy the code

The full content of the update is as follows:

{
  "name": "kuari"."version": "0.0.0"."main": "main.js"."scripts": {
    "dev": "vite"."build": "vite build"."serve": "vite preview"."electron": "wait-on tcp:3000 && electron ."."electron:serve": "concurrently -k \"yarn dev\" \"yarn electron\""
  },
  "dependencies": {
    "vue": "^ 3.2.16"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^ 1.9.3." "."concurrently": "^ 6.3.0"."cross-env": "^ 7.0.3." "."electron": "^ 15.1.2." "."vite": "^" 2.6.4. ""."wait-on": "^ 6.0.0"}}Copy the code

Run four.

Two commands have been added:

  • yarn electronTo wait for the TCP 3000 port to be accessible, run the electron command
  • yarn electron:serveThe development server runs and executes for blockingyarn electronThe command

To run the project, run yarn electron:serve. When the project file is modified, the desktop application is automatically updated.

5. Original blog

  • Vite+Electron quickly build a VUE3 desktop application (ii) — dynamic module thermal overload