Vue使用electron创建桌面程序

最新推荐文章于 2024-09-27 16:59:25 发布

原创最新推荐文章于 2024-09-27 16:59:25 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #electron #前端

vue 同时被 2 个专栏收录

33 篇文章

订阅专栏

Electron

10 篇文章

订阅专栏

本文介绍了如何在Vue项目中集成Electron，使用`electron-builder`进行打包，并解决因网络问题导致的依赖下载失败。通过修改`package.json`配置，创建`background.js`文件设置主窗口属性，然后运行`npm run serve`和`npm run electron:serve`启动项目和本地客户端。当遇到打包错误时，可以手动下载依赖并放入指定文件夹。最终，使用`npm run electron:build`命令完成打包，生成的exe安装程序即为项目成果。

1、vue项目安装electron

npm install electron -g

2、vue项目添加Electron-builder打包工具

vue add electron-builder

3、注意事项

package.json的配置

13行的background.js文件在 src目录下（没有就自己创建一个）

background.js内容：(供参考)

let electron = require('electron')
let app = electron.app // 引用app
let browserWindow = electron.BrowserWindow // 窗口引用
let mainWindow = null // 声明要打开的的主窗口
app.on('ready', () => {
  mainWindow = new browserWindow({
    width: 900,
    height: 900,
    webPreferences: {
      nodeIntegration: true,  // 主程序使用node环境
      enableRemoteModule: true, // 窗口打开通信
      contextIsolation: false, // 子进程调用node环境
    }
  })
  // 嵌入网址
  mainWindow.loadURL('http://localhost:8080/') // 上线就使用dist文件

  mainWindow.on('closed', () => {
    mainWindow = null
  })
})

4、运行命令

npm run serve                --网页
npm run electron:serve       --本地客户端查看效果

效果图

5、打包命令

打包可能会出错，比如出现下图这些问题

这个问题是相关依赖包是在GitHub上面，由于网络原因，不能够正常下载访问，所以影响打包操作。
这个时候，我们手动把相关依赖包下载到本地，并且放到指定文件夹即可。

问题2：
问题1解决后，继续执行打包，可能会出现了一个新的问题，还是依赖包相关问题。

和刚才一样下载到本地，放到指定文件夹就行

再继续遇见这样的，参考按前面2个方法解决看看。

执行打包命令

npm run electron:build

查看打包文件

vuecli Setup 0.1.0.exe就是我们打包完的安装程序

在win-unpacked有个exe结尾的文件可以直接执行查看

这里忘了说，隐藏菜单栏需要修改下配置文件内容，下次说；