electron + vue + elementUI 常见问题及解决方案

开机启动问题

网上搜到的都是window下采用注册表写入的方式做的，找不到Mac的方法，其实有一个通用的包可以解决这个问题：

yarn add auto-launch -D

来看具体代码

const AutoLaunch = require('auto-launch')

var launch = new AutoLaunch({
  name: 'TimeManager', // APP 名称
  path: process.execPath 
})

// 更新开机自动启动配置
function updateAutoLaunch (isAutoLaunch) {
  if (isAutoLaunch) { // 开机自启
    launch.enable()
    launch.isEnabled().then((isEnabled) => {
      if (isEnabled) {
        console.log('修改成功，当前开机自启状态: ', app.getLoginItemSettings().openAtLogin)
        return
      }
      console.error('重试再次开启....', app.getLoginItemSettings().openAtLogin)
      launch.enable()
      console.log('修改成功，当前开机自启状态: ', app.getLoginItemSettings().openAtLogin)
    }).catch((err) => {
      console.error(err)
    })
  } else { // 取消开机自启
    launch.disable()
    launch.isEnabled().then((isEnabled) => {
      if (!isEnabled) {
        console.log('修改成功，当前开机自启状态: ', app.getLoginItemSettings().openAtLogin)
        return
      }
      console.error('重试再次关闭....', app.getLoginItemSettings().openAtLogin)
      launch.disable()
      console.log('修改成功，当前开机自启状态: ', app.getLoginItemSettings().openAtLogin)
    }).catch((err) => {
      console.error(err)
    })
  }
}

打包后查看日志

打包后调试比较麻烦，遇到问题往往直接就挂了，所以需要导出日志文件：

// 只考虑生产环境
if (process.env.NODE_ENV === 'production') {
  const log = require('electron-log')
  // 重写 console 的方法，日志会在控制台输出，并且输出到本地文件。具体用法参考官方文档
  Object.assign(console, log.functions)
  // 获取本地日志文件路径
  console.log('日志文件：', log.transports.file.getFile())
}

打包运行后，可以在：~/Library/Logs/{app name}/main.log中查看日志信息：

• 这里的app name与package.json中的name属性的值一致

另外，调试的时候，console.log(obj)，最好采用序列化的方式输出，否则obj在console后又被修改的话，就可能不会按预期顺序输出。

let obj = { value:10 }
console.log("obj :",obj) // 期望输出  obj.value : 10
obj.value =5
console.log("obj :",obj) // 期望输出  obj.value : 5

如下图所示，console.log的输出不符合预期了：

解决办法：console.log(JSON.stringify(obj))

build后打不开app

报错信息：No Info.plist file in application bundle or no NSPrincipalClass in the Info.plist file, exiting

引入了通知包node-notifier，结果打包后报错了，解决办法如下：

通过 asarUnpack 指定不打包到 asar 的文件. 如果按照 Electron 官方文档的打包方式，可以使用：asar pack app app.asar --unpack ./node_modules/node-notifier/vendor/**

// package.json
"build": {
   "appId": "com.electron.time_manager",
   "asar": true,
   "asarUnpack": [
     "./node_modules/node-notifier/vendor/**"
   ]
 }

重新运行打包命令，可以在 app.asar 同目录看到对应的 unpacked 目录。

运行打包好的应用，可完美弹出对应的消息提示
另外，也可以通过不打包 asar 的方式使用，配置如下：

"build": {
    "appId": "com.codinglife.electron-notifier",
    "asar": false
}

打包后的应用中，源文件全部放在 app 目录下。

这个问题参考链接：https://www.it610.com/article/1297832652195307520.htm

打包后如何发布到Github的release

package.json文件中，需要配置的内容如下

{
  ...
  "scripts": {
    "release": "node .electron-vue/build.js && electron-builder -p always"
  },
  "build": {
    "publish": {
      "provider": "github"
    },
    ...
  },
  ...
}

需要先去Github申请token：https://github.com/settings/tokens

然后要将这个TOKEN添加到你本地的环境变量中，Mac下：

vim ~/.bash_profile

然后加上：

export GH_TOKEN="前面申请到的 token 复制进来" 

设置后记得重新打开terminal才会生效

然后打包时执行即可：

yarn run release

完成后去Github上的release上先选tags，再切换回releases，就可以看到多了一个草稿。

另外，我们也可以先创建草稿，然后发布到指定草稿上，具体方法如下：
查看当前package.json中的version字段：

{
  "name": "TimeManager",
  "version": "0.0.2", // 这个字段
  ...
}

然后创建一个release草稿，注意Tag Version要填v加上前面的version字段，也就是这里我得填v0.0.2：

填完之后保存为草稿：

然后命令行执行：yarn run release，就会自动打包后上传到这个草稿中，我们需要自行来点击Publish release进行发布。