当前位置: 首页 > news >正文

vue转electron项目以及使用fs报错:Module not found: Error: Can‘t resolve ‘fs‘ in解决办法

    前面写了一篇博客,通过vue ui创建electron+vue项目,其实关键的一步就是增加vue-cli-plugin-electron-builder插件依赖。这一步可以通过界面上添加,也可以手动添加。

    手动添加就是在命令行下运行如下命令:

vue add electron-builder

    该命令可以安装vue-cli-plugin-electron-builder并且安装electron,它会提供几个版本给你选择,一般默认选择最高版本即可。

    构建electron项目主要是安装electron环境,在使用上面的命令添加electron-builder的时候,会下载electron版本,为了提高下载速度,一般会设置一个npm变量electron_mirror。我一般是设置在npmrc配置文件中,和npm registry一起:

registry=https://registry.npm.taobao.org
electron_mirror=https://npm.taobao.org/mirrors/electron/

注意electron_mirror设置后面的/,如果丢失,那么下载electron一定会失败,导致安装失败。     

    设置了electron镜像地址,那么vue add electron-builder命令会很快执行成功:

 

    最后,启动项目,执行命令:npm run electron:serve

//

     上面增加了electron,该项目就是一个桌面程序了,可以使用node环境,当我高兴的引入fs的时候,启动项目竟然报错了:

    Module not found: Error: Can't resolve 'fs' in 

     这个错误,并不是缺少依赖,而是系统默认不支持node,需要将node集成进来,好在vue项目有一个配置文件vue.config.js,在这个文件里面,添加一个配置:pluginOptions:{electronBuilder:{nodeIntegration:true}},如下所示:

module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions:{
    electronBuilder:{
      nodeIntegration:true
    }
  }
})

    最后就可以像下面这样使用fs了。

<template>
  ...
</template>
<script>
import fs from 'fs'


...

fs.readFile("/etc/profile",function(err,data){
    console.log(data.toString())
})
</script>

    如下所示,我读取mac系统下的profile配置文件,最后成功读取并通过控制台打印出来了:

 

     这篇文章是根据自己今天在实际工作中遇到问题总结,以前也做过electron项目,但是没有遇到过node环境这个问题,总算解决了。我看有的项目使用webpack管理,如果遇到无法使用fs,那么就需要把fs加入到webpack.config.js的配置项中,好像叫fs:empty,我没试过。

相关文章:

  • 【MATLAB教程案例14】基于ACO蚁群优化算法的函数极值计算matlab仿真及其他应用
  • 优化算法 - Adam算法
  • Open3D (C++) 点云变换
  • 黑白照片修复彩色软件免费有哪些?分享这三个实用的软件给你
  • CSS基础入门手册
  • python-- for循环的基础语法
  • _Linux进程控制
  • vue3.0--1.vue3.0环境集成、setup、ref函数、reactive函数、计算属性(computed)
  • 基于Opencv5.x(C++)流媒体视频流实现网页浏览器人脸检测
  • 网络安全——XSS跨站脚本攻击
  • AT24C02存储与读取数据
  • Linux高级编程--gdb调试
  • 家校协同小程序实战教程
  • 沉睡者C - 想要通过网上来赚钱,悟性很重要
  • Java集合面试小结(2)
  • 【刷算法】求1+2+3+...+n
  • Docker 笔记(1):介绍、镜像、容器及其基本操作
  • Iterator 和 for...of 循环
  • MYSQL如何对数据进行自动化升级--以如果某数据表存在并且某字段不存在时则执行更新操作为例...
  • passportjs 源码分析
  • Promise面试题2实现异步串行执行
  • Terraform入门 - 1. 安装Terraform
  • thinkphp5.1 easywechat4 微信第三方开放平台
  • use Google search engine
  • 百度地图API标注+时间轴组件
  • 电商搜索引擎的架构设计和性能优化
  • 分享自己折腾多时的一套 vue 组件 --we-vue
  • 快速体验 Sentinel 集群限流功能,只需简单几步
  • 聊聊spring cloud的LoadBalancerAutoConfiguration
  • 适配mpvue平台的的微信小程序日历组件mpvue-calendar
  • 我感觉这是史上最牛的防sql注入方法类
  • C# - 为值类型重定义相等性
  • ​Kaggle X光肺炎检测比赛第二名方案解析 | CVPR 2020 Workshop
  • ​业务双活的数据切换思路设计(下)
  • #NOIP 2014#day.2 T1 无限网络发射器选址
  • #QT(串口助手-界面)
  • (DFS + 剪枝)【洛谷P1731】 [NOI1999] 生日蛋糕
  • (ISPRS,2023)深度语义-视觉对齐用于zero-shot遥感图像场景分类
  • (机器学习-深度学习快速入门)第三章机器学习-第二节:机器学习模型之线性回归
  • (免费分享)基于springboot,vue疗养中心管理系统
  • (三) diretfbrc详解
  • (转)关于多人操作数据的处理策略
  • **CI中自动类加载的用法总结
  • .NET 6 在已知拓扑路径的情况下使用 Dijkstra,A*算法搜索最短路径
  • .net core 调用c dll_用C++生成一个简单的DLL文件VS2008
  • .NET Core6.0 MVC+layui+SqlSugar 简单增删改查
  • .NET 将多个程序集合并成单一程序集的 4+3 种方法
  • .net 生成二级域名
  • .NET 药厂业务系统 CPU爆高分析
  • .net打印*三角形
  • .NET连接数据库方式
  • .NET文档生成工具ADB使用图文教程
  • @Transactional类内部访问失效原因详解
  • [ MSF使用实例 ] 利用永恒之蓝(MS17-010)漏洞导致windows靶机蓝屏并获取靶机权限
  • [ vulhub漏洞复现篇 ] AppWeb认证绕过漏洞(CVE-2018-8715)