快速上手electron 记录踩坑

浅_梦
816 阅读2分钟

「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」

记录刚开始使用electron时踩的坑

官网：www.electronjs.org/

自己用electron-vue搭建并配置的demo：github.com/F-howk/elec…

搭建时借鉴了：www.cnblogs.com/alex96/p/12…

注意点

.electron-vue文件夹是webpack的一些配置及代理 需要手动更改的在这里改

image.png

需要做更新时要在package.json里配置publish

"publish": [
      {
        "provider": "generic",
        "url": "xxx"
      }
    ]

并在主进程注册更新的相关事件

let updating = false;
autoUpdater.on('error', function () {
  updating = false;

})

autoUpdater.on('update-available', function (info) {
  console.log('update-available');
  updating = true;
  autoUpdater.downloadUpdate()
})

autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
  autoUpdater.quitAndInstall(true, true)
  mainWindow.destroy()
})

ipcMain.on('checkForUpdate', () => {
  if (updating) return
  // 执行自动更新检查
  console.log('checkForUpdate');
  autoUpdater.checkForUpdates()
})

当时做好后很期待的更新了，由于使用的自动更新而且是很多台一起更新，所以服务器带宽占满了！！导致下载安装包时下到一半因为网络问题客户端又开始下新的安装包。 所以需要在更新下载安装包的时候加锁！ image.png

最后打包后把 .exe .blockmap latest.yml 丢到服务器上就行

在使用vuex的时候要注意

import Vue from 'vue'
import Vuex from 'vuex'

import { createPersistedState, createSharedMutations } from 'vuex-electron'

import modules from './modules'

Vue.use(Vuex)

export default new Vuex.Store({
  modules,
  plugins: [
    createPersistedState(),
    //createSharedMutations()
  ],
  strict: process.env.NODE_ENV !== 'production'
})

如果用不上多进程共享数据的话要把 createSharedMutations()注释掉 在多项目开发的时候不注释掉你就会发现你存在vuex的数据 同时在几个端显示有这个数据如果命名一样的话就会造成数据混乱污染

主进程和渲染进程一般用ipc进行通信就够了，当然做客户端最重要的是记录日志用electron-log这个包来记录，需要打印的地方用可以重写console.log 但是打印对象时会报错toJSON() 不是一个函数所以最好打印JSON序列化后的字符串

log.transports.file.level = "silly";
console.log = log.log;

Vue.prototype.log = log;

环境配置

最开始环境相关的配置我是写在.ejs 文件里的，后来觉得不妥加上更换环境麻烦就写成.env文件的方式了 是模仿vue的 --mode 在用命令启动时用--mode后面加参数的方式来写的。

在webpack.renderer.config.js（因为打客户端包会走这里）webpack的HtmlWebpackPlugin中

let argv = process.argv.slice(2);
if(argv[0] == '--mode' && argv[1]){
  dotenv.config({path:path.join(__dirname, `../.env.${argv[1]}`)})
}
else{
  dotenv.config({path:path.join(__dirname, `../.env.dev`)})
}

用dotenv来注入环境变量，其实这里可以自己读取.env文件来获取参数，但由于比较懒就直接使用dotenv了并且代理可以使用[狗头]， 最后在HtmlWebpackPlugin写模板时把变量传到.ejs文件去建议传字符串好处理点，.ejs再JSON.parse()就是了，例如： let env = JSON.parse('<%= htmlWebpackPlugin.env %>')。

由于打包后是没有代理的所以请求的url就会缺少域名（我这种方式写的是这样）,所以在axios拦截器里做了一个操作。

image.png

这是一个记录大佬们觉得有欠缺的地方可以提一提

avatar
文章
阅读
粉丝