Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you the relevant knowledge about the method of vue3+electron12+dll client configuration development. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Modify warehouse source

Due to the unknown version of electron, there may be situations where serve is available and the white screen is turned on after build, so it needs to be treated with caution. It is best to commit a version when a version is available to facilitate code rollback if anyone has better information to share.

Before starting the configuration, you can modify the rc files of yarn and npm slightly, using commands or files to modify .npmrc or .yarnrc directly, these two global configuration files are usually in C:\ user\ your current account this folder, or under the current project to create a new file command rc file to partially change the configuration.

Because the electron download will fail due to network problems, it can be changed 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/chromedrivernpm 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/

The installation process uses vue create as the vue3 version. After the content is created, enter the project directory, append the vue electron-builder configuration electron, and select the current version 12.

Start

The corresponding startup commands have been assembled in package.json

Use npm run electron:serve to open development

Npm run electron:build compilation and packaging production

Replace the vue-devtools

Src/background.ts is the startup directory of electron under the project, and the following situations will occur in the development environment 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

This is due to the failure of the project to download and load vue-devtools on the Internet Google Store.

Many methods have been tried to load tools, so the temporary measure is to get rid of tools. Find the code and remove the 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 ()})

Many methods have been tried before, but they are not available. Later, after a careful comparison of the following, some problems were found.

The vue3 version and the vue2 version of vue-devtools are already different, so the dev-tools of vue2 is not available to vue3, so you need to download the corresponding development tools for vue3. The latest version of vue2 is 5.x, while the version of vue3 is 6.x beta. You can download this version of the plug-in through crx4chrome. Extract the downloaded crx and copy it to the root directory of the project in the form of session loading, replacing 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 you start 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 the annoying prompts, you can delete the corresponding prompts in the manifest.json of tools.

Matters needing attention

Syntax cannot be used

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

Using electron-edge-js to load the dll file developed by c #, the configuration process is a little tedious, and it takes 2 days to find a solution, but to no avail, here are the solutions, which need to be prescribed to the case.

Dll developed by C++ and c # uses different loaders, while C++ uses ffi-napi.

Using edge requires three additional 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' needs to be added in the vue.config.js file at this time, or created in the package.json sibling if there is no configuration file.

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

When configuration is not enabled, nodejs built-in variables such as _ _ dirname _ _ filename cannot be used

Uncaught (in promise) ReferenceError: _ _ dirname is not defined first need to configure new BrowserWindow

{/ / if you use nodejs's api, you need to set this to true nodeIntegration: true, / / at the same time, you need to set this to false / / not set Times Uncaught ReferenceError: require is not defined contextIsolation: false}

Uncaught (in promise) TypeError: fs.existsSync is not a function will be reported after the above configuration is completed.

At this point, you need to continue to add configuration items for vue.config.js.

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

If this item is configured separately, but nodeIntegration: true of new BrowserWindow is not enabled, Uncaught ReferenceError: require is not defined will occur

In addition, for folders placed by dll, resources is generally created in the project root directory to store resources, and the resource directory will not be directly packaged during the project packaging process, so you need to increase the resource configuration to prevent errors. For the file reference, in the development environment, it is the structure currently seen. When compiled and packaged, it is the resources directory under the installation directory, so there are some differences between the production and development reference files. You can look at the file reference after the experiment.

Module.exports = {pluginOptions: {electronBuilder: {externals: ['electron-edge-js'], / / this also needs to be enabled. The reference relationship will be written to nodeIntegration: true, builderOptions: {extraResources: {/ / copy the static file to the specified location during compilation. Otherwise, it will prompt that the file cannot be found from: 'resources/', to:'. /'},}

Provides a method to obtain the directory of files, which can directly obtain the resource directory of app under different operating systems. If it is window, it is 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, but you cannot use import. Otherwise, you can directly import if you will report Syntax Error: TypeError: Cannot read property' content' of null instead of setup syntax.

Borderless window

The system itself has a framework. If you need a custom framework, you can use frameless settings. If you need to use custom components (such as div.custom-frame-title) to drag and drop 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 selections-webkit-app-region: drag; / / this item is the corresponding status bar of the system} foreground and background notification

Import {ipcMain,ipcRenderer} from 'electron'

There are many api available in electron, the most important of which are ipcMain and ipcRenderer, which are used for communication between ui processes and system processes. In vue, use ipcRenderer.on ('eventname') to receive messages from the system and use ipcRenderer.send (' eventname') to send notifications to the system. IpcMain can also be used in the main thread.

Ipc usually combines with a custom title bar to do the following, or other events that need to manipulate the window itself

Win.minimize () / / minimize window win.maximize () / / maximize window win.close () / close window win.hide () / / Hidden window above is "vue3+electron12+dll Development client configuration method" all the content of this article, thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.