Vue使用electron创建桌面程序

1、vue项目安装electron

js

npm install electron -g

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

js

vue add electron-builder

3、注意事项

package.json的配置

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

background.js内容：(供参考)

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、运行命令

js

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

效果图

5、打包命令

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

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

基于Electron实现桌面应用开发代码实例

pdf 0星 超过10%的资源 85KB

下载

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

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

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

执行打包命令

js

npm run electron:build

Electron-vue脚手架改造vue项目的方法

pdf 0星 超过10%的资源 62KB

下载

查看打包文件

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

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

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