1. Primeiro, vamos clonar a demonstração no site oficial do electronic
# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start
Em seguida, faça as seguintes modificações em main.js e package.json no projeto clone
- main.js
win.loadFile('../dist/index.html'); //修改路径
- pacote.json
{
"name": "my-Electron",
"version": "1.0.0",
"main": "electron.js", //改为electron.js 为后面做准备
"license": "MIT",
"scripts": {
"start": "electron ."
},
2. Configure o projeto vue existente
1. Instale a dependência de elétrons e execute o seguinte comando
npm install electron --save-dev
npm install electron-packager --save-dev
2. Copie o main.js modificado acima para a pasta build no projeto e renomeie-o para electron.js
3. Altere assetsPublicPath para um caminho relativo no diretório config/index.js
assetsPublicPath: './',
4. Adicione uma instrução a package.json no projeto
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"electron_dev": "npm run build && electron build/electron.js",//新增的命令
então corra
//生成dist文件夹
npm run build
//运行electron
npm run electron_dev
Agora, a geração do aplicativo de desktop foi basicamente implementada com sucesso, mas a última etapa é o empacotamento!
Primeiro, copie o electron.js na pasta build e o arquivo package.json modificado anteriormente para dist e ,
em seguida, adicione as seguintes instruções ao package.json no projeto vue (este package.json é o projeto vue original)
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"electron_dev": "npm run build && electron build/electron.js",
"electron_build": "electron-packager ./dist/ --platform=win32 --arch=x64 --icon=./src/assets/ele.ico --overwrite" //新增的指令
},
Entre eles, icon=./src/assets/ele.ico é para gerar o ícone do arquivo exe, e o ico aqui deve ser o formato de arquivo ico nativo. Aqui está o link de produção online do ico
Finalmente execute o seguinte comando
npm run build
npm run electron_build
Finalmente, uma pasta correspondente, como my-Electron-win32-x64, será gerada. Encontre my-Electron.exe no arquivo gerado e clique para abri-lo para ver o aplicativo de desktop gerado. Conforme mostrado na figura abaixo (isso é gerado pelo projeto existente da minha empresa)
Observe que a página pode ficar em branco após a abertura
Existem aproximadamente dois motivos:
o primeiro: em geral, primeiro determine se é um problema de caminho e, se for um problema de caminho, modifique o caminho.
O segundo método: Se o modo padrão configurado no roteador/índice for histórico, ele ficará em branco após o empacotamento. Substitua o histórico por hash ou exclua a configuração do modo padrão.
Se você precisar usar o modo de histórico, precisará adicionar um recurso candidato no lado do servidor que cubra todas as situações: se a URL não corresponder a nenhum recurso estático, você deve retornar um index.html, que é a página da qual seu aplicativo depende . Então, apenas exclua o modo ou altere o modo para hash