用electron 打包发布集成vue2.0项目的操作过程

手里有个老项目是基于element admin框架下的,之前写的时候没考虑到要打包成桌面端,后期需要打包成客户端,然后就开始了一些列版本操作,看着百度了都很简单,把electron 加入到自己项目中各种不兼容,升级版本,改代码各种百度,一个国庆假期就搞了这个事情,为了后面大家少踩点坑,打算详细的写写我的踩坑之路还有版本配置(版本配置真的很有必要,不要嫌麻烦,一步一步走哈)

1.大家比较关注的版本配置表

node.js v15.0.0

electron


V14.2.9

vue
2.7.8


sass-loader


8.0.2

1.如果环境中没有安装cnpm 建议安装下,毕竟electron 用npm 安装基本99% 是安装失败的,别太侥幸了,已经走了很多遍了我(版本太高也会报错)

npm install cnpm@7.1.0 -g

2.安装 electron 环境

(如果 输入 vue add electron-buider 没反应需要  vue/cli升级下这个东西)

(1).在终端输入命令

Electron安装
  npm install electron -g

  Vue项目添加Electron-builder打包工具
  vue add electron-builder

(2)设置镜像方法(不配置也会报错,什么githhub)

npm config edit

使用该命令会弹出npm的配置文档,将以下类容复制到文件末尾。

electron_mirror=https://npm.taobao.org/mirrors/electron/
electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/

3.测试下的代码

npm run serve--网页
npm run electron:serve--客户端

4.打包命令:npm run electron:build

打包完成了之后,会出.exe

这个就很顺利的操作了

我遇到的bug总结

打包好了之后启动,发现后台连不上,这个地方好像

不需要代理了。问就不知道啥原因

好不容易登录上去了,发现路由不跳转(真的晕死在厕所算了我)

好了好 了改个mode:hash 就ok了

还是点不动还需要改改cookie:

const TokenKey = 'Admin-Token'

// if (process.env.NODE_ENV === 'production') {
//   store = new Store()
// }

export function getToken() {
  return localStorage.getItem(TokenKey)
}

export function setToken(token) {
  return localStorage.setItem(TokenKey, token)
}

export function removeToken() {
  // if (process.env.NODE_ENV === 'production') {
  //   return store.delete(TokenKey)
  // }
  return localStorage.removeItem(TokenKey)
}

最后忘记了该有的background.js和preload 两个文件代码(放在src 文件夹底下)(这个有啥用呢,在package.json 文件中加入一句  "main": "background.js",)

import {
  app,
  protocol,
  BrowserWindow,
  ipcMain,
  Menu,
  dialog,
  globalShortcut
} from 'electron'
import {
  createProtocol
} from 'vue-cli-plugin-electron-builder/lib';
import installExtension, {
  VUEJS3_DEVTOOLS
} from "electron-devtools-installer";
const fs = require('fs') // 引入node原生fs模块
const os = require('os')
const isDevelopment = process.env.NODE_ENV !== 'production';
let mainWindow
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([{
  scheme: 'app',
  privileges: {
    secure: true,
    standard: true
  }
}]);
const path = require('path')
const menus = [{
  label: '视图',
  submenu: [{
      label: '刷新',
      role: 'reload'
    },
    {
      label: '退出',
      role: 'quit'
    }
  ]
}]
const menu = Menu.buildFromTemplate(menus)

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    show: false,
    webPreferences: {
      enableRemoteModule: true, // 允许弹框
      webSecurity: false,
      nodeIntegration: true,
      nodeIntegrationInWorker: true, // 在Web工作器中启用了Node集成

      preload: path.join(__dirname, 'preload.js'),
      defaultEncoding: 'utf-8'
    }
  })
  mainWindow.once('ready-to-show', () => {
    mainWindow.show()
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) { // 开发环境
    // Load the url of the dev server if in development mode
    mainWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) mainWindow.webContents.openDevTools();
    globalShortcut.register('CommandOrControl+Shift+i', function () { //  使用快捷键shift+ctrl+i  调起开发工具
      mainWindow.webContents.openDevTools()
    })
  } else { //  生产环境
    // mainWindow.webContents.openDevTools() //  生产环境关闭调试工具
    // Load the index.html when not in development
    createProtocol('app')
    // Load the index.html when not in development
    mainWindow.loadURL('app://./index.html')
  }
  Menu.setApplicationMenu(menu)
}

/**
 * 初始化
 */
app.whenReady().then(() => {
  createWindow()
  app.setAppUserModelId('管理平台')
  // 点击MacOS底部菜单时重新启动窗口
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

// 兼容MacOS系统的窗口关闭功能
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
  mainWindow = null
})
// 最小化窗口(自定义导航条时)
ipcMain.on('window-min', () => {
  mainWindow.minimize()
})
// 最大化窗口(自定义导航条时)
ipcMain.on('window-max', () => {
  // 如果已经是最大化窗口就还原
  if (mainWindow.isMaximized()) {
    mainWindow.restore();
  } else {
    mainWindow.maximize()
  }
})
// 关闭窗口
ipcMain.on('window-close', () => {
  mainWindow.close()
  mainWindow = null;
  app.exit();
})

// 主进程给进程通信

ipcMain.on('toMain', function (event, arg) {
  event.sender.send('fromMain', arg); // 返回给渲染进程
});
// 下载进程
ipcMain.on('downLoad', function (event, arg) {
  mainWindow.webContents.downloadURL(arg.url);
});
// 调用文件读入方法
ipcMain.on('judgeUse', function (event, arg) {
  // 读入文件
  // 异步返回
  fs.readFile('./authorize.bin', {
    encoding: 'utf-8'
  }, (err, data) => {
    // if (err) {
    //   // dialog.showMessageBox({
    //   //   type: 'error',
    //   //   title: '找不到authorize.bin文件',
    //   //   message: err.path,
    //   //   buttons: ['ok']
    //   // }).then((index) => {
    //   //   if (index.response === 0) {
    //   //     mainWindow.close()
    //   //     mainWindow = null;
    //   //     app.exit();
    //   //   }
    //   // })
    //   event.sender.send('fromMain', null); // 返回给渲染进程
    // } else {
    //   event.sender.send('fromMain', data); // 返回给渲染进程
    // }
    event.reply('authorizeBack', data); // 返回给渲染进程
  })
});
// 读取本地服务的IP 地址 同步
ipcMain.on('syncGetLocalServer', function (event, arg) {
  // 读入文件,同步返回数据
  fs.readFile('./localServer.xml', {
    encoding: 'utf-8'
  }, (err, data) => {
    event.returnValue = data; // 返回给渲染进程
  })
});
// 读取本地服务的IP 地址 异步
ipcMain.on('asyncGetLocalServer', function (event, arg) {
  // 读入文件
  // 异步返回
  fs.readFile('./localServer.xml', {
    encoding: 'utf-8'
  }, (err, data) => {
    event.reply('asyncBackLocalServer', data); // 返回给渲染进程
  })
});
// 隐藏按钮
ipcMain.on('hideMenu', function (event, arg) {
  mainWindow.setMenu(null);
});
// 显示按钮
ipcMain.on('showMenu', function (event, arg) {
  mainWindow.setMenu(menu);
});
app.on("ready", async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    try {
      await installExtension(VUEJS3_DEVTOOLS);
    } catch (e) {
      console.error("Vue Devtools failed to install:", e.toString());
    }
  }
  await createWindow();
});

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', data => {
      if (data === 'graceful-exit') {
        app.quit();
      }
    });
  } else {
    process.on('SIGTERM', () => {
      app.quit();
    });
  }
}
import {
  contextBridge,
  ipcRenderer
} from 'electron'
import {
  autoUpdater
} from 'electron-updater'
window.ipcRenderer = ipcRenderer
contextBridge.exposeInMainWorld('ipcRenderer', {
    // 异步向主进程 发送消息
    send: (channel, data) => {
      const validChannels = ['toMain', 'downLoad', 'judgeUse', 'hideMenu', 'showMenu', 'window-close', 'asyncGetLocalServer']
      if (validChannels.includes(channel)) {
        ipcRenderer.send(channel, data)
      }
    },
    // 同步向主进程 发送消息,
    sendSync: (channel, data) => {
      const validChannels = ['syncGetLocalServer']
      if (validChannels.includes(channel)) {
        return ipcRenderer.sendSync(channel, data)
      }
    },
    // 异步接收主进程返回的数据
    receive: async (channel) => {
      const validChannels = ['authorizeBack', 'asyncBackLocalServer']
      if (validChannels.includes(channel)) {
        return new Promise((resolve) => {
          ipcRenderer.on(channel, (event, ...args) => {
            resolve(...args)
          })
        });
      }
    }
  })

  // 检测更新,在你想要检查更新的时候执行,renderer事件触发后的操作自行编写
  ! function updateHandle() {
    let message = {
      error: '检查更新出错',
      checking: '正在检查更新……',
      updateAva: '检测到新版本,正在下载……',
      updateNotAva: '现在使用的就是最新版本,不用更新',
    };
    const uploadUrl = "http://61.4.184.177:7799/download/"; // 下载地址,不加后面的**.exe
    autoUpdater.setFeedURL(uploadUrl);
    autoUpdater.on('error', function (error) {
      sendUpdateMessage(message.error)
    });
    autoUpdater.on('checking-for-update', function () {
      sendUpdateMessage(message.checking)
    });
    autoUpdater.on('update-available', function (info) {
      sendUpdateMessage(message.updateAva)
    });
    autoUpdater.on('update-not-available', function (info) {
      sendUpdateMessage(message.updateNotAva)
    });

    // 更新下载进度事件
    autoUpdater.on('download-progress', function (progressObj) {
      mainWindow.webContents.send('downloadProgress', progressObj)
    })
    autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {

      ipcMain.on('isUpdateNow', (e, arg) => {
        console.log(arguments);
        console.log("开始更新");
        //some code here to handle event
        autoUpdater.quitAndInstall();
      });

      mainWindow.webContents.send('isUpdateNow')
    });

    ipcMain.on("checkForUpdate", () => {
      //执行自动更新检查
      autoUpdater.checkForUpdates();
    })
  }()

// 通过main进程发送事件给renderer进程,提示更新信息
function sendUpdateMessage(text) {
  mainWindow.webContents.send('message', text)
}

到此这篇关于用electron 打包发布集成vue2.0项目的文章就介绍到这了,更多相关electron 打包vue内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 关于electron-vue打包后运行白屏的解决方案

    目录 electron-vue打包后运行白屏的解决 electron-vue打包之后只有空白页问题 原因 electron-vue打包后运行白屏的解决 找到.electron-vue文件夹中的webpack.renderer.config.js文件,注释掉下面这段 然后再重新打包,问题解决. electron-vue打包之后只有空白页问题 原因 使用了history路由导致打包之后 只有空白页面,将路由改成hash之后就有显示了 以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们.

  • vue项目使用electron进行打包操作的全过程

    目录 一.设置国内镜像 二.创建vue框架文件 三.到vue项目的目录里面安装electron 四.做好以上步骤后就可以测试打包了 五.其他配置 附:electron打包设置可以选择安装目录 总结 一.设置国内镜像 npm config edit 执行后会弹出npm的配置文档,将以下类容复制到文件末尾. electron_mirror=https://npm.taobao.org/mirrors/electron/ electron-builder-binaries_mirror=https:/

  • Vue Electron实现输入法自动刷字数功能详解

    目录 安装依赖 Vue代码 Electron 代码 总结 思路:循环使用 robotjs 库模拟键盘点击,从而实现输入法刷自动刷字数的功能. 安装依赖 npm i robotjs Vue代码 在 Vue 中编写一个文本域用来聚焦输入法焦点. 思路:当我们按下 S 键时,给 Electron 发送消息告诉 Electron 开始刷字数; 当我们按下 E 键时,告诉 Electron 停止自动刷. <template> <textarea @keyup.stop="onKeyup&

  • 详解如何使用vue和electron开发一个桌面应用

    目录 正文 1. 创建 Vue.js 项目 2. 安装和配置 Electron 3. 编写主进程代码 4. 编写渲染进程代码 5. 运行应用程序 6. 打包应用程序 结论 正文 Vue.js 和 Electron 都是非常流行的前端开发框架,它们的结合可以创建强大的桌面应用程序.在这篇文章中,我们将学习如何使用 Vue.js 和 Electron 开发一个简单的桌面应用程序.我们将涵盖以下内容: 创建 Vue.js 项目 安装和配置 Electron 编写主进程代码 编写渲染进程代码 1. 创建

  • vue2.0项目实现路由跳转的方法详解

    一.安装 1.安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖,说明安装成功 2.vue项目引入vue-ruoter: 二.应用 1.路径配置(页面跳转): 方法一:如果切换的页面不多,可以直接在main.js文件内配置. 方法二:如果切换的页面较多,可以建一个专门用于路由的js文件,里面配置路径. 1)router.js配置文件 2)main.js里引入router.js路由文件 2.组件里调

  • VUE使用vue create命令创建vue2.0项目的全过程

    目录 前言 第一步,打开命令行后,首先进入我们想要创建项目的目录下 第二步,执行 vue create xxxx 命令 总结 前言 为了保证创建过程中避免出现因权限不足的原因 从而 导致创建失败的问题,我们使用 管理员身份 打开命令行 第一步,打开命令行后,首先进入我们想要创建项目的目录下 g: 表示切换进入G盘 cd git 表示打开 当前盘下的 git 文件夹 大家可以根据以上两个命令进入自己想要保存项目的目录下,我这里是保存在 G:\Git 文件夹 第二步,执行 vue create xx

  • vue2.0项目集成Cesium的实现方法

    安装cesium 在已有项目中执行, npm i cesium 修改配置 build/webpack.base.conf.js 1.定义 Cesium 源码路径 const cesiumSource = '../node_modules/cesium/Source' 'use strict' const path = require('path') const utils = require('./utils') const config = require('../config') const

  • vue2.0项目中使用Ueditor富文本编辑器示例代码

    最近在vue项目中需要使用富文本编辑器,于是将Ueditor集成进来,作为公共组件. 项目地址:https://github.com/suweiteng/vue2-management-platform 1.放入静态资源并配置 首先把官网下载的Ueditor资源,放入静态资源src/static中. 修改ueditor.config.js中的window.UEDITOR_HOME_URL配置,如下图: 2.引入 在main.js中引入 import '../static/UE/ueditor.

  • Vue2.0中集成UEditor富文本编辑器的方法

    在vue的'项目中遇到了需要使用富文本编辑器的需求,在github上看了很多vue封装的editor插件,很多对图片上传和视频上传的支持并不是很好,最终还是决定使用UEditor. 这类的文章网上有很多,我进行了摸索.手写代码.汇总.排版,形成了这篇文章. 下载对应的UEditor源码 首先,去官网上下载UEditor的源码,根据你后台语言的不同下载对应的版本(PHP.Asp..Net.Jsp). http://ueditor.baidu.com/website/download.html 下载

  • 详解关于vue2.0工程发布上线操作步骤

    找了不少资料如何发布到服务器,然而还是没找到合适的可实际操作的文档.很多文档打着上线发布的标题,其实就是本地运行而已.其实vue2.0工程发布相当简单. 文章重点: 讲解vue工程配置部分的意义 如何打包为生产环境中的前端工程 如何打包发布到云端以及nginx服务器配置 一.vue工程配置部分的意义 首先我们先看下vue2.0整体工程目录结构 (非重点省略) - vueDemo //你的vue工程名 - build - build.js - check-version.js - utils.js

  • Java项目打包发布到maven私仓常见的几种方式

    前言 在早期没有使用maven之前,我们引用一些公有jar或者api jar,我们可能会采用这样的方式,通过手动导入这些jar到项目的classpath路径进行引用. 有了maven后,我们公司内部可能就会搭建maven私仓比如nexus,然后把这些公有jar或者api jar上传到nexus私仓,在pom.xml配置一下这些jar的坐标就可以引用. 今天我们的话题就是来聊聊项目打包发布到maven私仓常见的几种方式 发布到maven私仓的步骤 1.在maven的settings.xml中< s

  • 使用Docker部署打包发布springboot项目

    目录 前言 第一:环境 第二:开始描述从搞项目到docker发布: 第四:各种错误教训集合. 前言 从安装docker到多种方式打包发布,编译,镜像,容器等问题,遇到种种问题,终于不负所望,一步步解决,本文我会比较大跨度的来说明一切解决办法. 第一:环境 1.虚拟机安装的centos7. 2.docker已安装好,不会的可以参看我的docker安装文章. 3.搞一个很简单的springboot项目即可,先搞定发布编译再说. 第二:开始描述从搞项目到docker发布: 1.springboot项目

  • electron打包vue项目的方法 步骤

    目录 创建项目 添加electron-builder electron下载失败 窗体运行 打包exe 白屏 创建项目 点击这里 添加electron-builder 1.在项目目录下运行命令:vue add electron-builder2.electron-builder添加完成后会选择electron版本,直接选择最新版: electron下载失败 vue add electron-builder下载electron会下载失败,使用淘宝镜像下载:cnpm i electron 窗体运行 1

  • 用electron打包vue项目中的报错问题及解决

    目录 1.  首先一定要cd到项目的根目录 2.  接下来运行 如何用electron打包vue项目,请参见我的另一篇文章:如何用electron打包vue项目为桌面应用文件exe 这里,也要提到实际项目中的问题,可能有同志的目录结构和内容有些许差别,就我刚刚遇到的问题来说,常见的问题的有几个问题,以及解决办法如下: 1.  首先一定要cd到项目的根目录 (我这里是app)里面才能运行项目,再重新npm run build,不然的话很有可能出现 “ 系统找不到路径的问题 ”,成功的话会出现下面绿

随机推荐