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

手動(dòng)添加就是在命令行下運(yùn)行如下命令：

vue add electron-builder

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

構(gòu)建electron項(xiàng)目主要是安裝electron環(huán)境，在使用上面的命令添加electron-builder的時(shí)候，會(huì)下載electron版本，為了提高下載速度，一般會(huì)設(shè)置一個(gè)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一定會(huì)失敗，導(dǎo)致安裝失敗。     

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

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

//

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

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

這個(gè)錯(cuò)誤，并不是缺少依賴，而是系統(tǒng)默認(rèn)不支持node，需要將node集成進(jìn)來(lái)，好在vue項(xiàng)目有一個(gè)配置文件vue.config.js，在這個(gè)文件里面，添加一個(gè)配置：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配置文件，最后成功讀取并通過控制臺(tái)打印出來(lái)了：

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

總結(jié)

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

最新評(píng)論