vue+electron搭建JS桌面应用

1.vue先打包，拷贝打包好的项目dist

2.在打包好的vue项目下，全局安装electron

npm install electron -g

3.放入main.js 和package.json

const {app, BrowserWindow} =require('electron');//引入electron
let win;
let windowConfig = {
  width:800,
  height:600
};//窗口配置程序运行窗口的大小
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
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();
  }
});

package.json

{
    "name": "hycc",
    "version": "1.0.0",
    "author": "your name",
    "description": "My Electron app",
    "main": "main.js",
    "scripts": {
        "start": "electron .",
        "dist": "electron-builder"
    },
    "build": {
        "productName": "hycc",
        "directories": {
            "output": "dist"
        },
        "nsis": {
            "oneClick": false,
            "allowToChangeInstallationDirectory": true
        },
        "win": {
            "icon": "build/icons/food.png",
            "target": [
                {
                    "target": "nsis"
                }
            ]
        }
    },
    "devDependencies": {
        "electron": "20.0.5",
        "electron-builder": "^22.10.5"
    }
}

4.然后就能yarn start查看你的项目

yarn start

5.使用electron-builder打包,全局安装electron-builder

npm install electron-builder -g

6.yarn dist打包项目exe文件

yarn dist

基本都会失败，因为国内下载不下载打包环境，需要手动处理

6.1 downloading url=https://github.com/electron/electron/releases/download/v11.2.1/electron-v11.2.1-win32-ia32.zip size=74 MB parts=8

去https://registry.npmmirror.com/binary.html?path=electron/下载对应安装包，放到
C:\Users\juc\AppData\Local\electron\Cache地址下

6.2 winCodeSign

去https://github.com/electron-userland/electron-builder-binaries/releases/tag/winCodeSign-2.6.0 下载.7z文件解压放到C:\Users\juc\AppData\Local\electron-builder\Cache\winCodeSign里

6.3 nsis-3.0.4.2

https://github.com/electron-userland/electron-builder-binaries/releases/tag/nsis-3.0.4.2
下载后解压放到C:\Users\juc\AppData\Local\electron-builder\Cache\nsis

6.4 nsis-resources-3.4.1

https://github.com/electron-userland/electron-builder-binaries/releases/tag/nsis-resources-3.4.1
下载后解压放到C:\Users\juc\AppData\Local\electron-builder\Cache\nsis

再执行yarn dist基本就能打包成功了