vue+electron打包桌面应用

vue项目使用electron打包成exe文件

需求：需要把vue项目打包生成桌面应用，点击桌面图标进入程序，不需要在浏览器输入地址。而且在没有网络的情况下也能正常使用。

效果图

图片:

首先你需要一个完整的vue项目，执行打包命令npm run build。然后你的文件夹中有个dist文件夹，在终端cd dist进入dist文件夹

下载electron

在dist文件夹下执行命令npm install electron 代码片.

npm install electron;

在dist文件夹下创建main.js和package.json

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();
  }
});

package.json

{
  "name": "dist",
  "version": "1.0.1",
  "description": "",
  "main": "main.js",
  "build": {
    "appId": "com.leon.HelloWorld02",
    "copyright": "LEON",
    "productName": "管理系统",
    "dmg": {
      "background": "res/background.png",
      "window": {
        "x": 100,
        "y": 100,
        "width": 500,
        "height": 300
      }
    },
    "win": {
      "icon": "res/icon.ico"
    }
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "electron": "7.1.2",
    "electron-builder": "^22.8.0",
    "electron-package": "^0.1.0"
  }
}

执行命令npm run start，如果项目运行起来了说明electron安装成功

然后再执行命令 npm install electron-builder和 npm install electron-package

这样就可以看到dist文件夹里多了个dist 文件夹，里面的exe文件就是我们需要的。

注意：最好再vue项目打好包后点击index.html看能不能跑起来，跑不起来需要做其他配置，不能直接用这方法打包。