Detailed explanation of client configuration for vue3+electron12+dll development

The currently used version is vue3.0 + typescript + electron 12 created by @vue/cli4. Other versions have not been tested yet. The information on the Internet is of varying quality, so I spent time experimenting one by one to reach the best solution at the moment.

Modify the repository source

Due to the unknown nature of the electron version, it is possible that serve is available but a white screen appears after building, so you need to be careful. It is best to commit a version when it is available to facilitate code rollback. If anyone has better information, please 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 the folder C:\user\your current account, or create a new file command rc file in the current project to locally change the configuration.
Because electron downloads may fail due to network issues, we change to Taobao source or Huawei source.

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 <your projectname> to select the vue3 version. After the content is created, enter the project directory, append vue electron-builder to configure electron, and select the current version 12.

start up

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

Under the project, src/background.ts is the startup directory of electron. In the development environment, the following situations will occur with a long startup waiting time:

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

This is because the project needs to connect to the Google Store to download and load vue-devtools, which failed.

I tried many ways to load the tools but all failed, so the temporary solution is to remove the 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 have tried many methods before, but to no avail. Later, after careful comparison, I found some problems.

The vue-devtools of vue3 and vue2 are different, so the dev-tools of vue2 cannot be used for vue3. Therefore, you need to download the corresponding development tools of vue3. The latest version of vue2 is 5.x, while the latest version of vue3 is 6.x beta version. This version of the plugin can be downloaded via crx4chrome. Unzip the downloaded crx, copy it to the project root directory and use session loading to replace the original await installExtension(VUEJS_DEVTOOLS) 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)

Can be ignored. If you don't want to see annoying prompts, you can delete the corresponding content in tools' manifest.json

Precautions

The <script setup> syntax cannot be used

When using script-setup as a module, it works fine in the serve phase, but after build the component is not loaded, the page is blank, and no error is reported. The reason is unknown

Use electron-edge-js to load the dll file developed in c#. The configuration process is a bit cumbersome. I spent 2 days looking for a solution, but to no avail. The following is the solution. You need to prescribe the right medicine.

DLLs developed in C++ and C# use different loaders, and C++ uses FFI-NAPI.

Using edge requires adding three configurations at the same time

When nothing is configured, Uncaught (in promise) Error: Cannot find module '...\node_modules\electron\dist\resources\electron.asar\renderer\native\win32\x64\14.16.0\edge_nativeclr' will occur. At this time, you need to add it to the vue.config.js file. If there is no configuration file, you need to create it at the same level as package.json.

module.exports = {
    pluginOptions: {
        electronBuilder: {
            externals: ['electron-edge-js']
        }
    }
}

When the configuration is not enabled, nodejs built-in variables such as __dirname __filename cannot be used
Uncaught (in promise) ReferenceError: __dirname is not defined First you need to configure the new BrowserWindow

{      
    // If you use the nodejs api, you need to set this to true when packaging
    nodeIntegration: true,
    // At the same time, you need to set this to false
    // If not set, report Uncaught ReferenceError: require is not defined
    contextIsolation: false  
}

After the above configuration is completed, Uncaught (in promise) TypeError: fs.existsSync is not a function will be reported
At this point you need to continue adding configuration items to vue.config.js

module.exports = {
    pluginOptions: {
        electronBuilder: {
            externals: ['electron-edge-js'],
            // This also needs to be enabled, and the reference relationship will be written into nodeIntegration: true during the compilation phase, 
        }
    }
}

If you configure this option alone, but do not enable nodeIntegration: true for new BrowserWindow, Uncaught ReferenceError: require is not defined will occur.

In addition, for the folder where the dll is placed, resources are generally created in the project root directory to store resources, and the resource directory will not be packaged directly during the project packaging process, so resource configuration needs to be increased to prevent errors. For file references, in the development environment, the structure is what you see currently. After compilation and packaging, it is the resources directory under the installation directory. Therefore, there are some differences between the reference files in production and development. You can look at the file references after the experiment.

 module.exports = {
     pluginOptions: {
         electronBuilder: {
             externals: ['electron-edge-js'],
             // This also needs to be enabled, and the reference relationship will be written into nodeIntegration: true during the compilation phase, 
             builderOptions:{
                 extraResources: {
                     //Copy the static file to the specified location, otherwise it will prompt that the file cannot be found from: 'resources/',
                     to: './'
                 },
             }
         }
     }
 }

Provides a file access directory method, which can directly obtain the resource directory of the app under different operating systems. If it is window, process.platform==='win32'

const path = require('path')
export function getAppResourcePath (filePath: string) {
    if (process.platform === 'darwin' || process.platform === 'linux') {
        if (process.env.NODE_ENV === 'development') {
            return path.resolve('resources/' + filePath)
        } else {
            return path.join(__dirname, '..') + filePath
        }
    } else {
        return path.resolve('resources/' + filePath)
    }
}

When using setup syntax, you need to use require('electron-edge-js') to introduce it, and you cannot use import, otherwise you will report Syntax Error: TypeError: Cannot read property 'content' of null instead of setup syntax. You can import directly.

Borderless window

The system itself has a frame. If you need to customize the frame, you can use the frameless setting. If you need to use a custom component (such as div.custom-frame-title) to drag the operation window, you need to add styles to the corresponding elements:

 .custom-frame-title {
   -webkit-user-select: none; // This item prevents conflicts with text selection -webkit-app-region: drag; // This item is the system-specific status bar}

Front and back end notifications

import {ipcMain,ipcRenderer} from 'electron'

There are many available APIs in electron, the most important of which are: ipcMain and ipcRenderer, which are used for communication between the UI process and the system process. In vue, use ipcRenderer.on('eventname') to receive messages from the system, and use ipcRenderer.send('eventname') to send notifications to the system. Similarly, ipcMain can be used in the main thread.

ipc usually completes the following operations in conjunction with a custom title bar, or other events that require operating the window itself

win.minimize() //Minimize the window win.maximize() //Maximize the window win.close() //Close the window win.hide() //Hide the window

Final Thoughts

The other methods are no different from conventional Vue development. For the interaction between the system and the UI, you need to read more API documents.

This is the end of this article about the detailed configuration of vue3+electron12+dll client development. For more relevant vue3+electron12+dll client configuration content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!