O - 功能说明

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

Ⅰ- 壹 - 安装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文件