vue3+electron12+dll开发客户端配置的方法
修改仓库源
由于electron版本的未知性，可能存在serve可用而build之后打开白屏的情况，因此需要谨慎对待。最好在版本可用的情况下commit一个版本，方便代码回滚，如果谁有更好的资料希望共享。
在开始配置前，可以将yarn和npm的rc文件稍作修改，使用命令或者文件直接修改.npmrc或者.yarnrc，这两个全局配置文件一般在C:\user\你的当前账户这个文件夹下，或者在当前项目下新建文件命令rc文件以局部更改配置。
因为electron下载会因为网络问题而失败，因此修改为淘宝源，华为源亦可。
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/
安装过程使用 vue create
启动
在package.json中已经装配好对应的启动命令，
使用npm run electron:serve 开启开发
npm run electron:build 编译打包生产
更换vue-devtools
项目工程下 src/background.ts 为electron的启动目录，开发环境下会出现启动等待时间较长的以下情况
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
是因为项目需要联网谷歌商店下载并加载vue-devtools失败导致。
尝试了很多办法加载tools均失效，因此暂行手段：去掉tools。代码找到，去掉 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()
})之前试了很多办法，不可用。后来再仔细对照以下，发现了一些问题。
vue3的版本和vue2版本的vue-devtools已然不同，所以vue2的dev-tools并不能给vue3使用，因此，需要下载vue3对应的开发工具。vue2版本最新为5.x，而vue3的版本则为6.x beta版本。可以通过crx4chrome下载此版本的插件。将下载好的crx解压出来，然后拷贝到工程根目录下 采用session加载的形式，将原来 await installExtension(VUEJS_DEVTOOLS)的部分替换为
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()
})启动项目后，即可以查看 vue 的扩展。 对于
(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)
可以不予理会。如果不想看到烦人的提示可以到tools的manifest.json中删掉提示对应的内容
注意事项
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
Nvgpucomp64.dll导致Windows PC游戏崩溃;
Mar 26, 2024 am 08:20 AM
如果Nvgpucomp64.dll导致游戏频繁崩溃，这里提供的解决方案可能会对您有所帮助。这种问题通常是由于过时或损坏的显卡驱动程序、游戏文件损坏等原因引起的。修复这些问题可以帮助您解决游戏崩溃的困扰。Nvgpucomp64.dll文件与NVIDIA显卡关联。当这个文件崩溃时，你的游戏也会崩溃。这通常发生在《LordsoftheFallen》、《LiesofP》、《RocketLeague》和《ApexLegends》等游戏中。Nvgpucomp64.dll使WindowsPC上的游戏崩溃如果N
Windows系统目录CoreMessaging.dll文件丢失找不到问题解析
Feb 11, 2024 pm 11:42 PM
很多的用户们在利用电脑玩游戏的时候会出现提示coremessaging.dll丢失的情况，相信很多的用户们第一时间都会觉得软件或者是游戏的问题，其实不是的，这是因为电脑缺少了dll文件，用户们可以去下载coremessaging.dll文件就可以了。下面就让本站来为用户们来仔细的介绍一下Windows系统目录CoreMessaging.dll文件丢失找不到问题解析吧。Windows系统目录CoreMessaging.dll文件丢失找不到问题解析1、下载CoreMessaging.dll文件2、将
vue3项目中怎么使用tinymce
May 19, 2023 pm 08:40 PM
tinymce是一个功能齐全的富文本编辑器插件，但在vue中引入tinymce并不像别的Vue富文本插件一样那么顺利，tinymce本身并不适配Vue，还需要引入@tinymce/tinymce-vue，并且它是国外的富文本插件，没有通过中文版本，需要在其官网下载翻译包(可能需要翻墙)。1、安装相关依赖npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2、下载中文包3.引入皮肤和汉化包在项目public文件夹下新建tinymce文件夹，将下载的
vue3+vite:src使用require动态导入图片报错怎么解决
May 21, 2023 pm 03:16 PM
vue3+vite:src使用require动态导入图片报错和解决方法vue3+vite动态的导入多张图片vue3如果使用的是typescript开发，就会出现require引入图片报错，requireisnotdefined不能像使用vue2这样imgUrl:require(’…/assets/test.png’)导入，是因为typescript不支持require所以用import导入，下面介绍如何解决：使用awaitimport
Vue3如何实现刷新页面局部内容
May 26, 2023 pm 05:31 PM
想要实现页面的局部刷新，我们只需要实现局部组件（dom）的重新渲染。在Vue中，想要实现这一效果最简便的方式方法就是使用v-if指令。在Vue2中我们除了使用v-if指令让局部dom的重新渲染，也可以新建一个空白组件，需要刷新局部页面时跳转至这个空白组件页面，然后在空白组件内的beforeRouteEnter守卫中又跳转回原来的页面。如下图所示，如何在Vue3.X中实现点击刷新按钮实现红框范围内的dom重新加载，并展示对应的加载状态。由于Vue3.X中scriptsetup语法中组件内守卫只有o
Vue3怎么解析markdown并实现代码高亮显示
May 20, 2023 pm 04:16 PM
Vue实现博客前端，需要实现markdown的解析，如果有代码则需要实现代码的高亮。Vue的markdown解析库有很多，如markdown-it、vue-markdown-loader、marked、vue-markdown等。这些库都大同小异。这里选用的是marked，代码高亮的库选用的是highlight.js。具体实现步骤如下：一、安装依赖库在vue项目下打开命令窗口，并输入以下命令npminstallmarked-save//marked用于将markdown转换成htmlnpmins
win7系统丢失libcurl.dll怎么解决？win7找不到libcurl.dll文件解决方法
Feb 12, 2024 am 08:15 AM
win7系统丢失libcurl.dll怎么解决？一般都是dll文件都会导致部分程序无法正常进行使用，面对这个问题，很多用户都不知道应该如何解决，针对这个情况，今日小编就来和广大用户们分享详细的解决方法，希望今日win7教程能够给广大的用户们带来帮助，一起来了解看看吧。win7系统丢失libcurl.dll解决方法1、下载libcurl.dll文件。2、下载好后将文件放入相应的文件夹，这里分32位和64位操作系统路径如下：32位Win7操作系统将文件直接复制到C：\Windows\SYSTEM32
怎么使用vue3+ts+axios+pinia实现无感刷新
May 25, 2023 pm 03:37 PM
vue3+ts+axios+pinia实现无感刷新1.先在项目中下载aiXos和pinianpmipinia--savenpminstallaxios--save2.封装axios请求-----下载js-cookienpmiJS-cookie-s//引入aixosimporttype{AxiosRequestConfig,AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess
