vue项目使用electron-builder打包成exe,mac桌面应用

文章目录

  • 前言
  • 一、准备工作
  • 二、使用步骤
    • 1.官方electron项目
    • 2.打包vue项目
    • 3.修改官方electron项目
    • 4.mac版签名
    • 5.打包
  • 总结


前言

将vue项目打包成桌面应用,本文使用的是electron-builder而不使用electron-packager是因为builder相比packager有几个优点:
1,builder可以打包成安装包和可执行文件,而packager只能打包成可执行文件
2,builder打包后会比packager打包的项目体积小


一、准备工作

1,官方的electron项目,要使用官方的electron项目整合vue项目进行打包
2,打包后的vue项目
3,打包mac版的需要进行签名,所以还需要苹果证书和appid。

二、使用步骤

1.官方electron项目

1,从github拉取electron项目,并进行依赖安装和运行测试。保证官方案例是可正常运行的:

//拉取项目
git clone https://github.com/electron/electron-quick-start
//安装依赖
npm install
//运行测试
npm start

运行后不出意外的话,应该可以看到桌面版的官方项目。
其中几个重要的文件要具体关注,后面会用到,即:main.js和package.json

//main.js的部分代码
function createWindow () {
   
  // Create the browser window.
  const mainWindow = new BrowserWindow({
   
    width: 800,	//设置窗口宽高
    height: 600,
    autoHideMenuBar :true,  //自动隐藏顶部菜单栏
    webPreferences: {
   
      preload: path.join(__dirname, 'preload.js')
    }
  })
  // 首页加载文件地址
  mainWindow.loadFile('index.html')
  // 开启调试窗口
  // mainWindow.webContents.openDevTools()
}

//package.json的部分代码
{
   
  "name": <

你可能感兴趣的:(vue项目打包成桌面应用,vue.js,macos,electron)