vue3+electron12+dll开发客户端配置的方法

今天小编给大家分享一下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 自选为vue3版本，内容创建后进入项目目录，追加 vue electron-builder 配置electron，版本选择当前12版本。

启动

在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中删掉提示对应的内容

注意事项