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
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
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
Nvgpucomp64.dll causes Windows PC games to crash;
Mar 26, 2024 am 08:20 AM
If Nvgpucomp64.dll is causing your game to crash frequently, the solutions provided here may help you. This problem is usually caused by outdated or corrupted graphics card drivers, corrupted game files, etc. Fixing these issues can help you deal with game crashes. The Nvgpucomp64.dll file is associated with NVIDIA graphics cards. When this file crashes, your game will crash too. This usually happens in games like LordsoftheFallen, LiesofP, RocketLeague, and ApexLegends. Nvgpucomp64.dll crashes games on Windows PC if N
Analysis of the problem that the CoreMessaging.dll file is missing in the Windows system directory
Feb 11, 2024 pm 11:42 PM
Many users will be prompted that coremessaging.dll is missing when using their computers to play games. I believe that many users will immediately think that there is a problem with the software or the game. In fact, it is not. This is because the computer is missing the dll file. , users can download the coremessaging.dll file. Let this site carefully introduce to users the analysis of the problem that the CoreMessaging.dll file in the Windows system directory is missing and cannot be found. Analysis of the problem that the CoreMessaging.dll file in the Windows system directory is missing and cannot be found 1. Download the CoreMessaging.dll file 2.
How to use tinymce in vue3 project
May 19, 2023 pm 08:40 PM
tinymce is a fully functional rich text editor plug-in, but introducing tinymce into vue is not as smooth as other Vue rich text plug-ins. tinymce itself is not suitable for Vue, and @tinymce/tinymce-vue needs to be introduced, and It is a foreign rich text plug-in and has not passed the Chinese version. You need to download the translation package from its official website (you may need to bypass the firewall). 1. Install related dependencies npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2. Download the Chinese package 3. Introduce the skin and Chinese package. Create a new tinymce folder in the project public folder and download the
vue3+vite: How to solve the error when using require to dynamically import images in src
May 21, 2023 pm 03:16 PM
vue3+vite:src uses require to dynamically import images and error reports and solutions. vue3+vite dynamically imports multiple images. If vue3 is using typescript development, require will introduce image errors. requireisnotdefined cannot be used like vue2 such as imgUrl:require(' .../assets/test.png') is imported because typescript does not support require, so import is used. Here is how to solve it: use awaitimport
How to refresh partial content of the page in Vue3
May 26, 2023 pm 05:31 PM
To achieve partial refresh of the page, we only need to implement the re-rendering of the local component (dom). In Vue, the easiest way to achieve this effect is to use the v-if directive. In Vue2, in addition to using the v-if instruction to re-render the local dom, we can also create a new blank component. When we need to refresh the local page, jump to this blank component page, and then jump back in the beforeRouteEnter guard in the blank component. original page. As shown in the figure below, how to click the refresh button in Vue3.X to reload the DOM within the red box and display the corresponding loading status. Since the guard in the component in the scriptsetup syntax in Vue3.X only has o
How Vue3 parses markdown and implements code highlighting
May 20, 2023 pm 04:16 PM
Vue implements the blog front-end and needs to implement markdown parsing. If there is code, it needs to implement code highlighting. There are many markdown parsing libraries for Vue, such as markdown-it, vue-markdown-loader, marked, vue-markdown, etc. These libraries are all very similar. Marked is used here, and highlight.js is used as the code highlighting library. The specific implementation steps are as follows: 1. Install dependent libraries. Open the command window under the vue project and enter the following command npminstallmarked-save//marked to convert markdown into htmlnpmins
How to solve the problem of missing libcurl.dll in win7 system? Win7 cannot find libcurl.dll file solution
Feb 12, 2024 am 08:15 AM
How to solve the problem of missing libcurl.dll in win7 system? Generally, dll files will cause some programs to be unable to be used normally. Faced with this problem, many users do not know how to solve it. In response to this situation, today the editor will share a detailed solution with the majority of users. I hope that win7 will be used today. Tutorials can help a large number of users, so let’s take a look. Solution to missing libcurl.dll in win7 system 1. Download the libcurl.dll file. 2. After downloading, put the file into the corresponding folder. The paths for 32-bit and 64-bit operating systems are as follows: For 32-bit Win7 operating system, copy the file directly to C:\Windows\SYSTEM32
How to select an avatar and crop it in Vue3
May 29, 2023 am 10:22 AM
The final effect is to install the VueCropper component yarnaddvue-cropper@next. The above installation value is for Vue3. If it is Vue2 or you want to use other methods to reference, please visit its official npm address: official tutorial. It is also very simple to reference and use it in a component. You only need to introduce the corresponding component and its style file. I do not reference it globally here, but only introduce import{userInfoByRequest}from'../js/api' in my component file. import{VueCropper}from'vue-cropper&
