vue para projeto de elétron e erro ao usar fs: Módulo não encontrado: Erro: Não é possível resolver 'fs' na solução

    Escrevi um blog anteriormente sobre a criação de um projeto Electron + Vue por meio do vue UI. Na verdade, a etapa principal é adicionar a dependência do plug-in vue-cli-plugin-electron-builder. Esta etapa pode ser adicionada através da interface ou manualmente.

    Para adicioná-lo manualmente, execute o seguinte comando na linha de comando:

vue add electron-builder

    Este comando pode instalar o vue-cli-plugin-electron-builder e instalar o electron. Ele fornecerá várias versões para você escolher. Geralmente, a versão mais recente é selecionada por padrão.

    Construir um projeto de elétrons envolve principalmente a instalação do ambiente de elétrons. Ao usar o comando acima para adicionar o construtor de elétrons, a versão do elétron será baixada. Para melhorar a velocidade de download, uma variável npm elétron_mirror geralmente é definida. Eu costumo configurá-lo no arquivo de configuração do npmrc, junto com o registro do npm:

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

Preste atenção ao / após a configuração do elétron_mirror. Se estiver faltando, o download do elétron definitivamente falhará, causando falha na instalação.     

    Depois de definir o endereço do espelho eletrônico, o comando vue add electron-builder será executado com sucesso rapidamente:

 

    Por fim, inicie o projeto e execute o comando: npm run Electron:serve

//

     Electron foi adicionado acima, e o projeto agora é um programa de desktop que pode usar o ambiente do nó.Quando apresentei o fs com alegria, um erro foi relatado ao iniciar o projeto:

   Módulo não encontrado: Erro: não é possível resolver 'fs' em 

     Este erro não é devido à falta de dependências, mas porque o sistema não suporta o nó por padrão e o nó precisa ser integrado. Felizmente, o projeto vue possui um arquivo de configuração vue.config.js. Neste arquivo, adicione uma configuração : pluginOptions:{electronBuilder: {nodeIntegration:true}}, conforme mostrado abaixo:

module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions:{
    electronBuilder:{
      nodeIntegration:true
    }
  }
})

    Finalmente, você pode usar fs da seguinte maneira.

<template>
  ...
</template>
<script>
import fs from 'fs'


...

fs.readFile("/etc/profile",function(err,data){
    console.log(data.toString())
})
</script>

    Conforme mostrado abaixo, li o arquivo de configuração do perfil no sistema Mac e, finalmente, li e imprimi-o com sucesso por meio do console:

 

     Este artigo é baseado em um resumo dos problemas que encontrei no trabalho real hoje. Já trabalhei em projetos de elétrons antes, mas nunca encontrei o problema do ambiente de nós e finalmente o resolvi. Vejo que alguns projetos usam gerenciamento de webpack. Se você não conseguir usar fs, será necessário adicionar fs ao item de configuração de webpack.config.js. Parece ser chamado fs:empty. Ainda não tentei.