前面寫了一篇博客，通過vue ui創(chuàng)建electron+vue項目，其實關(guān)鍵的一步就是增加vue-cli-plugin-electron-builder插件依賴。這一步可以通過界面上添加，也可以手動添加。

手動添加就是在命令行下運行如下命令：

vue add electron-builder

該命令可以安裝vue-cli-plugin-electron-builder并且安裝electron，它會提供幾個版本給你選擇，一般默認(rèn)選擇最高版本即可。

構(gòu)建electron項目主要是安裝electron環(huán)境，在使用上面的命令添加electron-builder的時候，會下載electron版本，為了提高下載速度，一般會設(shè)置一個npm變量electron_mirror。我一般是設(shè)置在npmrc配置文件中，和npm registry一起：

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

注意electron_mirror設(shè)置后面的/，如果丟失，那么下載electron一定會失敗，導(dǎo)致安裝失敗。     

設(shè)置了electron鏡像地址，那么vue add electron-builder命令會很快執(zhí)行成功：

最后，啟動項目，執(zhí)行命令：npm run electron:serve

//

上面增加了electron，該項目就是一個桌面程序了，可以使用node環(huán)境，當(dāng)我高興的引入fs的時候，啟動項目竟然報錯了：

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

這個錯誤，并不是缺少依賴，而是系統(tǒng)默認(rèn)不支持node，需要將node集成進(jìn)來，好在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系統(tǒng)下的profile配置文件，最后成功讀取并通過控制臺打印出來了：

這篇文章是根據(jù)自己今天在實際工作中遇到問題總結(jié)，以前也做過electron項目，但是沒有遇到過node環(huán)境這個問題，總算解決了。我看有的項目使用webpack管理，如果遇到無法使用fs，那么就需要把fs加入到webpack.config.js的配置項中，好像叫fs:empty，我沒試過。

總結(jié)

到此這篇關(guān)于vue轉(zhuǎn)electron項目及解決使用fs報錯:Module not found: Error: Can't resolve 'fs' in的文章就介紹到這了,更多相關(guān)vue轉(zhuǎn)electron項目及fs報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論