vue3+electron12+dll开发客户端配置详解

当前使用的版本为 @vue/cli4 创建的 vue3.0 + typescript + electron 12 版本创建,其他版本暂未测试。网上资料良莠不齐,因此花费时间依次试验,达到一个目前最优解。

修改仓库源

由于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 <your projectname> 自选为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中删掉提示对应的内容

注意事项

<script setup> 语法不可以使用

当使用script-setup作为模块时,在serve阶段可以正常使用,但是在build之后组件未加载,页面呈现空白,且不报错,原因未知

使用 electron-edge-js 加载 c# 开发的 dll 文件,配置过程略微繁琐,花费2天时间寻求解答,但是均未果,以下是解决办法,需要对症下药

c++和c#开发的dll使用不同的加载器,c++使用ffi-napi。

使用edge需要同时增加三处配置

当什么都没有配置时,将会发生 Uncaught (in promise) Error: Cannot find module '...\node_modules\electron\dist\resources\electron.asar\renderer\native\win32\x64\14.16.0\edge_nativeclr' 此时需要在vue.config.js文件增加,如果没有配置文件,则需要在package.json同级创建。

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

当配置未开启时,将不能使用 __dirname __filename等nodejs内置变量
Uncaught (in promise) ReferenceError: __dirname is not defined 首先需要配置 new BrowserWindow

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

以上配置完成后会报 Uncaught (in promise) TypeError: fs.existsSync is not a function
此时需要继续增加 vue.config.js 的配置项

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

如果单独配置此项,但是并没有开启 new BrowserWindow的 nodeIntegration: true ,则会发生 Uncaught ReferenceError: require is not defined

此外,对于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() //隐藏窗口

写在最后

其他方式就和常规的vue开发无异,关于系统和ui的交互需要多翻阅api文档 文档地址

到此这篇关于vue3+electron12+dll开发客户端配置详解的文章就介绍到这了,更多相关vue3+electron12+dll客户端配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 基于 Vue 的 Electron 项目搭建过程图文详解

    Electron 应用技术体系推荐 目录结构 demo(项目名称) ├─ .electron-vue(webpack配置文件) │ └─ build.js(生产环境构建代码) | └─ dev-client.js(热加载相关) │ └─ dev-runner.js(开发环境启动入口) │ └─ webpack.main.config.js(主进程配置文件) │ └─ webpack.renderer.config.js(渲染进程配置文件) │ └─ webpack.web.config.js ├

  • Electron vue的使用教程图文详解

    下面详细给大家介绍Electron+vue的使用,具体内容如下所示: .现如今前端框架数不胜数,尤其是angular.vue吸引一大批前端开发者,在这个高新技术快速崛起的时代,自然少不了各种框架的结合使用.接下来是介绍electron+vue的结合使用. 2.Electron是什么?? 对于我来说Electron相当于一个浏览器的外壳,可以把网页程序嵌入到壳里面,可以运行在桌面上的一个程序,可以把网页打包成一个在桌面运行的程序,通俗来说就是软件,比如像QQ.优酷.网易音乐等等.功能的强大超出你的

  • Electron + vue 打包桌面操作流程详解

    提前准备一个vue项目,也可以使用初始的vue项目 vue init webpack 安装到后边有的会出现报错,可以忽略,启动npm run dev 启动成功就可以 在vue项目下执行下载以下依赖,会用到 cnpm install electron --save-dev cnpm install electron-packager --save-dev //这个是打成exe文件的插件,之后要用,提前下载好 获取Electron的资源 git clone https://github.com/el

  • electron-vue开发环境内存泄漏问题汇总

    package.json "dependencies": { "vue": "^2.5.16" }, "devDependencies": { "ajv": "^6.5.0", "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-plu

  • 解决Vue+Electron下Vuex的Dispatch没有效果问题

    这个问题是解决基于 vue 和 electron 的开发中使用 vuex 的 dispatch 无效的问题,即解决了 Please, don't use direct commit's, use dispatch instead of this. 问题. 先允许我梳理一下目录结构,以便阅读的时候不会一头雾水,你到底说的这个文件是哪个-- 其中 /src/main 是存放主配置文件的,/src/render 下面有 store.router.components 等. components 下面就

  • vue3+electron12+dll开发客户端配置详解

    当前使用的版本为 @vue/cli4 创建的 vue3.0 + typescript + electron 12 版本创建,其他版本暂未测试.网上资料良莠不齐,因此花费时间依次试验,达到一个目前最优解. 修改仓库源 由于electron版本的未知性,可能存在serve可用而build之后打开白屏的情况,因此需要谨慎对待.最好在版本可用的情况下commit一个版本,方便代码回滚,如果谁有更好的资料希望共享. 在开始配置前,可以将yarn和npm的rc文件稍作修改,使用命令或者文件直接修改.npmr

  • vue3 axios 实现自动化api配置详解

    目录 概述 示例 约定 请求 URL 的约定 请求传参的约定 分页列表,请求参数约定 分页列表 响应示例 响应码 code 的约定 请求跨域问题解决方案 全局配置 配置说明coder/config.js 模型配置 1.实现对一个实体进行增.删.改.查.导出.唯一性校验 2.只需要增.删.改.查中得某些操作,可以指定生成你需要的方法 3.自定义方法配置 4.指定请求接口地址前缀 概述 在实践中,我们发现上述的代码重复率非常高,新增和修改都费力,并且是没技术含量的体力活. 但又必须要这样做,不适合以

  • Mac M1 Java 开发环境配置详解

    JDK 配置 目前 Zulu JDK 支持 M1芯片,下载Zulu JDK 下载后点击安装,在控制台输入java -version ~ % java -version openjdk version "11.0.10" 2021-01-19 LTS OpenJDK Runtime Environment Zulu11.45+27-CA (build 11.0.10+9-LTS) OpenJDK 64-Bit Server VM Zulu11.45+27-CA (build 11.0.1

  • SpringCloud OpenFeign与Ribbon客户端配置详解

    目录 一.前言 二.OpenFeign与Ribbon配置 1.OpenFeign默认处理请求超时时间 1.1.模拟处理请求0.5秒 1.2.模拟处理请求1秒 2.Ribbon配置 2.1.配置请求处理超时5秒 2.2.模拟请求处理5秒 3.OpenFeign配置 3.1.配置请求处理超时6秒 3.2.OpenFeign配置对全部服务有效 3.3.针对某个服务 一.前言 OpenFeign为微服务架构下服务之间的调用提供了解决方案,OpenFeign是一种声明式.模板化的HTTP客户端.在Spri

  • webpack4.x开发环境配置详解

    本文实例讲述了webpack4.x开发环境配置方法.分享给大家供大家参考,具体如下: 写这篇文章的初衷在于,虽然网络上关于webpack的教程不少,但是大多已经过时,由于webpack版本更新后许多操作变化很大,很多教程的经验已经不适合.当我们使用npm安装webpack时,若不指定webpack的版本,将默认安装最新版,笔者测试时默认安装的是4.1.1,并不能照搬老教程的方法.为此,笔者进行了最新版配置的探索,使用的是windows操作系统,如果你的是webpack4.x版本,可参考进行配置.

  • Java Web开发环境配置详解

    这是进行Java Web开发必备的一个过程,仅供新手参考,高手可以忽略! 先看看要安装的东西: jdk下载地址:http://www.jb51.net/softs/214120.html eclipse下载:http://www.jb51.net/softs/143046.html MySQL下载:http://www.jb51.net/softs/40589.html tomcat下载:http://www.jb51.net/softs/417569.html 各位也可以去官网上下载,版本不一

  • Centos6.5搭建java开发环境配置详解

    一.安装jdk 1.查看Linux自带的JDK是否已安装 java –version 如果出现openjdk,最好还是先卸载掉openjdk,在安装sun公司的jdk. 2.查看jdk信息 rpm -qa|grep java 3.卸载OpenJDK,执行以下操作: rpm -e --nodeps tzdata-java-2012c-1.el6.noarch rpm -e --nodeps java-1.7.0-openjdk-1.7.0.45-1.45.1.11.1.el6.x86_64 4.新

  • .NET Core开发之配置详解

    熟悉ASP.NET的开发者一定对web.config文件不陌生.在ASP.NET环境中,要想添加配置参数,一般也都会在此文件中操作.其中最常用的莫过于AppSettings与ConnectionStrings两项.而要在代码中获得文件中的配置信息,ConfigurationManager则是必不可少需要引入的程序集. 然而到了ASP.NET Core时代,存储与读取配置的方式都发生了改变. 如果对ASP.NET Core项目有所了解的话,应该会看到过appsettings.json这个文件.这里

  • IOS开发 支持https请求以及ssl证书配置详解

    IOS开发 支持https请求以及ssl证书配置详解 前言: 众所周知,苹果有言,从2017年开始,将屏蔽http的资源,强推https 楼主正好近日将http转为https,给还没动手的朋友分享一二 一.证书准备 1.证书转换 在服务器人员,给你发送的crt证书后,进到证书路径,执行下面语句 // openssl x509 -in 你的证书.crt -out 你的证书.cer -outform der 这样你就可以得到cer类型的证书了.双击,导入电脑. 2.证书放入工程 1.可以直接把转换好

  • 使用Webpack 搭建 Vue3 开发环境过程详解

    从零开始使用 Webpack 搭建 Vue3 开发环境 创建项目 首先需要创建一个空目录,在该目录打开命令行,执行 npm init 命令创建一个项目,这个过程会提示输入一些内容,完成后会自动生成一个 package.json 文件 Webpack 的配置文件 project project-name + |- index.html |- package.json + |- webpack.config.js + |- /src + |- index.js webpack.config.js '

随机推荐