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,我没试过。
vue转electron项目以及使用fs报错:Module not found: Error: Can‘t resolve ‘fs‘ in解决办法相关推荐
- webpack4 报错 Module not found: Error: Can't resolve
webpack 要打包的文件的路径 -o 打包好的输出文件的路径 报错 Module not found: Error: Can't resolve... 查到的解决方法通常是说 文件路径大小写写错了 ...
- 解决typescrip使用xml2js库报错:Module not found: Error: Can‘t resolve ‘timer‘ in ‘‘
1.xml2js使用方法: yarn add xml2js yarn add @types/xml2js --dev 2.引入 var parseString = require('xml2js'). ...
- 前端报错Module not found: Error: Can‘t resolve巴拉巴拉的
我用的anrd pro框架的ts版,搞路由时有了这个报错,如果你无论怎么改路由配置她都报这个错,那么这个错还有一种可能就是你写出来了这个路由但是从来没有引用过他,随便这个地方用一下看看是不是报错就消失 ...
- Vue报错Module not found: Error: Can‘t resolve ‘less-loader‘
方法一 npm install less less-loader --save-dev 方法二
- 报错Module not found: Error: Can't resolve './public/javascript/page/index/index.js' in 'E:\pr
描述:出现这种错误的原因是找不到该文件.
- Vue项目启动webpack报错Module build failed: Error: No PostCSS Config found in......
自己写的公司项目,今天需要提交到公司版本库,可是在本地启动正常的项目,拷贝到git文件目录下突然报错Module build failed: Error: No PostCSS Config foun ...
- Vue报错Module build failed Error Node Sass version 6.0.1 is incompatible with ^4.0.0.解决方案
Vue报错Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.解决方案 错误提示: ERRO ...
- oracle插入时间报错,Oracle 插入时间时 报错:ORA-01861: 文字与格式字符串不匹配 的解决办法...
一.写sql的方式插入到Oracle中 往oracle中插入时间 '2007-12-28 10:07:24' 如果直接按照字符串方式,或者,直接使用to_date('2007-12-28 10:07 ...
- npm 报错 Module build failed: Error: No PostCSS Config found in:
npm 报错 Module build failed: Error: No PostCSS Config found in: 你在网上找的解决方案应该有提到webpack版本的问题.不要以为升级web ...
最新文章
- CSS类名称/选择器中哪些字符有效?
- 【Caffe实践】基于Caffe的人脸检测实现
- Struts DispatchAction
- Java正则表达式:我最期望弄懂的知识,希望对大家都有帮助
- 如何把自己的网站部署在网上_Terminal:如何在IPFS上部署Wordpress网站
- redis缓存原理与实现_SpringBoot整合Redis缓存,手把手教你一步一步实现
- 数据和云2020年度最受欢迎的Top10文章、专栏、文档、直播资源大放送(建议收藏)...
- 虚拟机+Ubuntu+filezilla连接
- 为什么谐振时电抗为0_高压直流输电(LCC-HVDC 和 MMC-HVDC)中平波电抗器的作用和选择策略...
- Storyboard和Xib混用黑魔法-swift版
- 全能文件恢复软件推荐
- 最新遥感图像解译标准数据集--202105
- 在线教育开源 java_新款SpringBoot在线教育平台开源了
- 《程序员的数学》读书计划
- 凭证反过账 金蝶k3_金蝶软件k3凭证反过账
- Informix数据库学习随笔
- Windows 10下MASM汇编语言环境搭建
- c语言将字符输出到屏幕中央,C语言printf“()”真的会将输出发送到屏幕吗?
- 【大话设计模式-2】UML 类图的绘制(源码案例分析)
- 2020年末的一些职业规划思考