纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

非思不可   2021-06-10 我要评论
想了解vue3+electron12+dll开发客户端配置详解的相关内容吗非思不可在本文为您仔细讲解vue3+electron12+dll客户端配置的相关知识和一些Code实例欢迎阅读和指正我们先划重点:vue3,客户端配置,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文档 文档地址


相关文章

猜您喜欢

  • Python描述符 详解Python描述符的工作原理

    想了解详解Python描述符的工作原理的相关内容吗不加班的程序员丶在本文为您仔细讲解Python描述符的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Python描述符的工作原理,Python描述符下面大家一起来学习吧..
  • pyqt5蒙版遮罩 pyqt5蒙版遮罩mask,setmask的使用

    想了解pyqt5蒙版遮罩mask,setmask的使用的相关内容吗集电极在本文为您仔细讲解pyqt5蒙版遮罩 的相关知识和一些Code实例欢迎阅读和指正我们先划重点:pyqt5蒙版遮罩,pyqt5,mask,setmask下面大家一起来学习吧..

网友评论

Copyright 2020 www.fresh-weather.com 【世纪下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式