vue轉electron項目及解決使用fs報錯:Module not found: Error: Can't resolve 'fs' in

Posted on by

前面寫瞭一篇博客，通過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的文章就介紹到這瞭,更多相關vue轉electron項目及fs報錯內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：