How to develop client configuration with vue3+electron12+dll

Modify the warehouse source

Due to the unknown of the electron version, there may be a situation where the server is available and a white screen opens after the build, so it needs to be treated with caution. It is best to commit a version when it is available to facilitate code rollback. If anyone has better information, they would like to share it.

Before starting the configuration, you can slightly modify the rc files of yarn and npm. Use commands or files to directly modify .npmrc or .yarnrc. These two global configuration files are generally in C:\user\your In the folder of the current account, or create a new file command rc file under the current project to partially change the configuration.
Because the electron download will fail due to network problems, it is changed to Taobao source, Huawei source can also be used.

npm set config registry http://registry.npm.taobao.org/
npm set config chromedriver_cdnurl http://registry.npm.taobao.org/chromedriver
npm set config electron_mirror http://registry.npm.taobao.org/electron/
npm set config electron_builder_binaries_mirror http://registry.npm.taobao.org/electron-builder-binaries/

During the installation process, use vue create to select the vue3 version. After the content is created, enter the project directory, add vue electron-builder to configure electron, and select the current version 12.

Startup

The corresponding startup command has been assembled in package.json,

• Use npm run electron:serve to start development

• npm run electron:build Compile and package production

Replace vue-devtools

Project project under src/background .ts is the startup directory of electron. In the development environment, the following situations may occur where the startup waiting time is long

Launching Electron...
Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times

is because the project needs to be downloaded from the Google Store online And failed to load vue-devtools.

I have tried many methods to load tools but all failed, so the temporary method is to remove tools. The code is found, just remove installExtension

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

I tried many methods before but it didn’t work. Later, I carefully compared the following and found some problems.

The vue3 version is different from the vue2 version of vue-devtools, so the dev-tools of vue2 cannot be used by vue3. Therefore, you need to download the development tools corresponding to vue3. The latest version of vue2 is 5.x, while the version of vue3 is 6.x beta version. This version of the plugin can be downloaded via crx4chrome. Unzip the downloaded crx, and then copy it to the project root directory. Use session loading to replace the original await installExtension(VUEJS_DEVTOOLS) part with

import {session} from 'electron'

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
    const vue_devtools = 'ljjemllljcmogpfapbkkighbhhppjdbg-6.0.0-beta-13-Crx4Chrome.com'
    await session.defaultSession.loadExtension(path.resolve(vue_devtools))
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

. After starting the project, you can view the extension of vue. For

(node:5904) ExtensionLoadWarning: Warnings loading extension at E:\scan\vue3_electron\ljjemllljcmogpfapbkkighbhhppjdbg-6.0.0-beta-13-Crx4Chrome.com:
Unrecognized manifest key 'browser_action '.
Unrecognized manifest key 'update_url'.
Permission 'contextMenus' is unknown or URL pattern is malformed.
Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system.
(Use `electron --trace-warnings ...` to show where the warning was created)

You can ignore it. If you don’t want to see annoying prompts, you can delete the content corresponding to the prompts in the manifest.json of tools

Notes