Empacote o projeto vue em um aplicativo de computador .exe

Índice

Etapa 1: Baixe o modelo de início rápido do elétron

Etapa 2: insira o arquivo de modelo baixado (início rápido do elétron)

Etapa 3: empacotar seu próprio projeto (npm run build)

Etapa 4: exclua o arquivo index.html da demonstração oficial

Etapa 5: Encontre main.js no projeto de demonstração oficial e modifique o caminho do arquivo de empacotamento para nosso index.html

Etapa 6: copie a pasta dist empacotada do seu projeto para o diretório raiz oficial da demonstração

Etapa 7: Verifique package.json no projeto de demonstração oficial. Em circunstâncias normais, execute o seguinte comando para entrar na visualização do efeito.

Etapa 8: No projeto de demonstração oficial, baixe a dependência electr-packager necessária para empacotar

Etapa 9: na demonstração oficial, insira package.json e adicione a instrução do empacotador no script

Etapa 10: execute o comando para empacotar e uma pasta App-win32-x64 aparecerá no projeto

Recentemente, estou escrevendo um sistema de software que transforma o projeto Vue empacotado em um programa executável .exe no computador. Não estive envolvido nesse aspecto do desenvolvimento antes, então entrei na Internet para ler os procedimentos operacionais relevantes. Agora o mais mainstream Existem dois métodos de empacotamento: um é substituir a demonstração do seu próprio projeto no elétron e o outro é modificá-lo no elétron. A principal modificação é o caminho do seu próprio projeto. É claro que esses dois métodos são todos modificados na ferramenta eletrônica. Usamos a primeira solução. Por quê? Porque é simples, conveniente e menos propensa a erros.

Atualmente, os tutoriais de embalagem da estação C apenas ensinam as instruções sem explicar o processo claramente, então alguns amigos que estão apenas começando e não sabem muito sobre isso ficam confusos ao operá-lo. Acho que a explicação neste artigo é mais detalhado e vou dar um joinha. , apoie-o!

Etapa 1: Baixe o modelo de início rápido do elétron

Esta operação é muito simples. Se você tiver Git em seu computador, você pode usar a linha de comando para inserir diretamente o seguinte código. Caso contrário, você pode baixar um modelo do site oficial do Electron ou GitHub. Vou ensinar apenas o primeiro. aqui. Abra o Git CMD

Insira o seguinte local de endereço Git:

git clone https://github.com/electron/electron-quick-start

Desta forma, haverá um modelo baixado na minha unidade E. Podemos dar uma olhada.

Etapa 2: insira o arquivo de modelo baixado (início rápido do elétron)

Usamos diretamente o código VS para abrir este arquivo,

Use diretamente o comando npm start para executar a demonstração oficial, e podemos ver a interface do aplicativo na demonstração oficial.

A interface deve ser assim. Para quem não operou com sucesso, você pode ver principalmente se entrou na pasta. Se não entrou, use cd para esta pasta. Se ainda encontrar erros, pode ser que você tenha não instalei as dependências, npm install, os demais motivos específicos serão solicitados com base no erro específico relatado, obrigado!

A seguir, vamos dar uma olhada no arquivo de entrada mian.js na pasta oficial da instância (electron-quick-start).A imagem abaixo é a parte da função createWindows (criar porta serial);

Etapa 3: empacotar seu próprio projeto (npm run build)

Observe que este é o seu próprio projeto, não empacote a demonstração oficial atordoado, mesmo sem perceber!

De volta à pasta podemos ver isto: