已经完成的Vue 项目利用electron打包为桌面应用

秒速五厘米 2022-08-31 15:20 209阅读 0赞

# O - 功能说明 #

# Ⅰ- 壹 - 安装electron #

首先打包vue项目找到 **dist** 目录，在这个目录下打开终端生成package.json

yarn init 
    //or
    npm init

## 一 切换镜像 ##

yarn config set registry https://registry.npm.taobao.org/
    yarn config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
    yarn config set ELECTRON_BUILDER_BINARIES_MIRROR http://npm.taobao.org/mirrors/electron-builder-binaries/

## 二 安装electron和electron-packager ##

复制下面的或者使用 npm安装

{ 
      "name": "admin",
      "version": "1.0.0",
      "main": "index.js",
      "license": "MIT",
      "main": "main.js",
      "build": { 
        "appId": "com.leon.HelloWorld02",
        "copyright": "LEON",
        "productName": "erp管理系统",
        "dmg": { 
          "background": "res/background.png",
          "window": { 
            "x": 100,
            "y": 100,
            "width": 500,
            "height": 300
          }
        },
        "win": { 
          "icon": "res/icon.ico"
        }
      },
      "scripts": { 
        "start": "electron .",
    	"build": "electron-packager ./ --out ./exe/ --platform=win32 --arch=x64 --icon=./public/header.ico --overwrite"
      },
      "dependencies": { 
        "electron": "^13.1.7",
        "electron-packager": "^15.3.0"
      }
    }

# Ⅱ - 贰 - 打包桌面应用 #

## 一 创建文件main.js ##

const { app, BrowserWindow} =require('electron');//引入electron
    let win;
    let mainWindow;
    let windowConfig = { 
      width:800,//创建窗口的宽度
      height:600,//窗口高度
      webPreferences: { //解决跨域问题
        webSecurity: false
      }
    };//窗口配置程序运行窗口的大小
    function createWindow(){ 
      win = new BrowserWindow(windowConfig);//创建一个窗口
      win.loadURL(`file://${ __dirname}/index.html`);//在窗口内要展示的内容index.html 就是打包生成的index.html
      win.webContents.openDevTools();  //开启调试工具
      win.on('close',() => { 
        //回收BrowserWindow对象
        win = null;
      });
      win.on('resize',() => { 
        win.reload();
      }) 
    }
    app.on('ready',createWindow);
    app.on('window-all-closed',() => { 
      app.quit();
    });
    app.on('activate',() => { 
      if(win == null){ 
        createWindow();
      }
    });

执行命令

yarn build

在exe 文件下即可看到打包的桌面端.exe文件