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

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

Use electron-edge-js loads the dll file developed by c#. The configuration process is a bit cumbersome. I spent 2 days looking for answers, but to no avail. The following is the solution, which requires the right medicine

c and dll developed by c# Use a different loader, c uses ffi-napi.

Using edge requires adding three configurations at the same time

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

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

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

{      
    // 如果使用到nodejs的api，则打包时需要将此设置为true
    nodeIntegration: true,
    // 同时，需要设置此项为false
    // 未设置时报 Uncaught ReferenceError: require is not defined
    contextIsolation: false  
}

After the above configuration is completed, Uncaught (in promise) TypeError: fs.existsSync is not a function
At this time, you need to continue to add configuration items of vue.config.js

module.exports = {
    pluginOptions: {
        electronBuilder: {
            externals: ['electron-edge-js'],
            // 此处同样需要开启，将会在编译阶段将引用关系写入
            nodeIntegration: true, 
        }
    }
}

If you configure this item separately , but nodeIntegration: true of new BrowserWindow is not enabled, Uncaught ReferenceError: require is not defined

will occur.

此外，对于dll放置的文件夹，一般在项目根目录创resources用于存放资源，并且项目打包过程中会不会直接打包资源目录，所以需要增加资源配置，以防止出错。对于文件的引用，在开发环境下，为当前所看到的结构，当编译打包后，为安装目录下resources目录，所以生产和开发的引用文件存在一定区别，可以实验后再看文件引用

 module.exports = {
     pluginOptions: {
         electronBuilder: {
             externals: ['electron-edge-js'],
             // 此处同样需要开启，将会在编译阶段将引用关系写入
             nodeIntegration: true, 
             builderOptions:{
                 extraResources: {
                     // 拷贝静态文件到指定位置，否则会提示文件找不到
                     from: 'resources/',
                     to: './'
                 },
             }
         }
     }
 }

提供文件获取目录方法，可以直接获取不同操作系统下app的resource目录，如果是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)
    }
}

使用setup语法时，需使用require('electron-edge-js')引入，不可以使用import，否则会报 Syntax Error: TypeError: Cannot read property 'content' of null 而非 setup语法，则可以直接import

无边框窗口

系统本身是带有框架的，如果需要自定义框架，可以使用frameless 设置，如果需要使用自定义组件(比如 div.custom-frame-title)拖拽操作窗口时，需要给对应的元素增加样式:

 .custom-frame-title {
   -webkit-user-select: none; // 此项防止与文本选择冲突
   -webkit-app-region: drag; // 此项为系统相应状态栏
 }

前后台通知

import {ipcMain,ipcRenderer} from 'electron'

在electron中有很多可用api，其中最重要的是：ipcMain和ipcRenderer，用于ui进程和系统进程的通信。 在vue内使用ipcRenderer.on('eventname') 接受系统发来的消息，用ipcRenderer.send('eventname') 发送通知给系统，同样ipcMain可以在主线程使用。

ipc通常结合自定义标题栏完成以下操作，或者其他需要操作窗口本身的事件

win.minimize() //最小化窗口
win.maximize() //最大化窗口
win.close() //关闭窗口
win.hide() //隐藏窗口

The above is the detailed content of How to develop client configuration with vue3+electron12+dll. For more information, please follow other related articles on the PHP Chinese website!