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

2023-05-16

    前面写了一篇博客,通过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,我没试过。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐

  • mybatis使用collection嵌套查询

    在开发中 xff0c 可能会遇到一对多的关系 xff0c 这个时候 xff0c 一条sql语句就难以胜任这个任务了 只能先执行一条sql xff0c 然后根据返回的结果 xff0c 再做一次sql关联查询 xff0c 这个时候 xff0c
  • java通过流读取图片做base64编码

    在web页面上 xff0c 显示图片 xff0c 一般是给出图片地址 xff0c 然后以url的方式显示 xff0c 但是有一些特殊情况 xff0c 如果我们的图片保存在ftp服务器上 xff0c 不能外部轻易访问 xff0c 但是可以通过
  • tesseract-ocr+java实现图片文字识别

    ocr是Optical Character Recognition的简写 xff0c 就是光学字符识别技术 主要是对包含文本资料的图片进行识别 xff0c 获取文本信息的技术 目前tesseract ocr这个工具可以很方便的在Window
  • mysql使用join做update操纵与使用join做查询时出现重复记录的问题

    在实际处理数据过程中 xff0c 有一些数据可能会从别的地方导入过来 xff0c 两个表有关联 xff0c 但是一个表中的某一列缺失 xff0c 如果要补全 xff0c 可以利用另一个表来做填充 这里就是今天的第一个问题 xff0c 使用u
  • mac系统上通过源码编译安装opencv for java

    本人在Mac系统上尝试下载opencv源码 xff0c 然后通过cmake make make install命令编译安装 xff0c 都失败 xff0c 各种依赖缺失报错 最后通过brew install build from sourc
  • vmware安装苹果虚拟机卡在苹果图标位置不动

    计算机环境 xff1a vmware16 2 xff0c win11 xff0c macos 12 monterey xff0c macos majave 如题所示 xff0c 在vmware里面安装苹果虚拟机 xff0c 通过unlock
  • docker搭建fastdfs环境

    fastdfs是一个开源的分布式文件系统 xff0c 在实际使用中 xff0c 通过源码编译安装过程非常复杂 xff0c 但是通过docker快速构建却非常容易 下面介绍通过docker安装fastdfs的方法 docker镜像的选择也挺重
  • springboot项目结合fastdfs做文件上传

    前面一篇博客介绍通过docker构建fastdfs xff0c 并且在storage容器中通过fdfs upload file命令成功上传了一个文件 xff0c 最后通过http ip 8888 group path访问到了文件 xff0c
  • Kernel panic - not syncing: IO-APIC + timer doesn‘t work解决办法

    如题所示 xff0c 我在使用qemu system x86 64模拟器启动linux内核与busybox根文件系统组成的虚拟机的时候报错 xff0c 系统无法正常开启 xff0c 运行截图如下 xff1a 这里说的是apic和时钟无法工作
  • ubuntu源码编译busybox与linux内核并使用qemu-system-x86_64模拟启动

    busybox 1 35 0 https busybox net downloads busybox 1 35 0 tar bz2 sudo apt install make gcc libncurses dev 编译配置 xff1a 在b
  • Postgre数据库用户权限总结

    1 故事起源 我们的项目使用了PG数据库 xff0c 在项目开发阶段 xff0c 为了省事偷懒 xff0c 直接将应用连接数据库的用户给了supperuser权限 xff0c 用起来简直不要太爽 随着开发进度接近中后期 xff0c 开始筹建
  • mvn install:install-file将本地jar安装到maven本地仓库

    有一些三方jar包是远程仓库中没有的 xff0c 我们在maven项目中 xff0c 可以通过指定本地jar的方式使用它 lt dependency gt lt groupId gt org lt groupId gt lt artifac
  • linux奇技淫巧

    杀死进程 杀死进程 xff0c 一般的做法 xff0c 我们先通过ps ef 结合grep 定位进程号 然后执行kill 9 PID 有人将这个操作简化 xff0c 通过一行命令就解决 1 找进程号 ps ef grep python3 g
  • [牛客网]OR63删除公共字符

    如题所示 xff0c 该算法描述如下 xff1a 描述 输入两个字符串 xff0c 从第一字符串中删除第二个字符串中所有的字符 例如 xff0c 输入 They are students 和 aeiou xff0c 则删除之后的第一个字符串
  • svg通过虚线画形状

    svg可以做很多事情 xff0c 如今和canvas在web开发中使用越来越多 默认svg画图 xff0c 如果是空白填充 xff0c 最后展示的形状线条是实线 今天介绍一个属性 xff0c 可以上画出的图形显示虚线 这个属性就是strok
  • 通过vue ui方式构建vue+electron项目

    以前我构建vue 43 electron项目都是使用一些模版比如webpack simulatedgreg electron vue等 xff0c 这些模版在github上 xff0c 有时候可能因为网络原因下载会慢一些 后来看到一些文章介
  • vue+echarts画甘特图

    vue项目中添加echarts xff0c 只需要增加echarts依赖 xff0c 然后在main js中引入echarts就可以使用了 1 npm install echarts save 2 修改main js import as e
  • mac系统下node版本管理工具n的安装与使用

    node版本管理 xff0c 在windows和linux下都叫nvm 在mac下 xff0c 更加简洁 xff0c 直接就是n xff0c 似乎容易让人产生怀疑 xff0c 这太简洁了 xff0c n可以表示很多意思啊 这就是mac系统独
  • python输出不换行与多行注释

    默认情况下 xff0c python输出打印方法print xff0c 每一次调用都会单独输出一行内容 xff0c 有些场景下面 xff0c 我们需要输出是连在一起的 xff0c 不用单行显示 这就需要对打印做设置 xff0c 参数是end
  • vue转electron项目以及使用fs报错:Module not found: Error: Can‘t resolve ‘fs‘ in解决办法

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