electron+vue+elementUI常见问题及解决⽅案
开机启动问题
⽹上搜到的都是window下采⽤注册表写⼊的⽅式做的，不到Mac的⽅法，其实有⼀个通⽤的包可以解决这个问题：yarn add auto-launch -D
来看具体代码
const AutoLaunch =require('auto-launch')
var launch =new AutoLaunch({
name:'TimeManager',// APP 名称
path: Path
})
// 更新开机⾃动启动配置
function updateAutoLaunch(isAutoLaunch){
if(isAutoLaunch){// 开机⾃启
electron vue教程
launch.isEnabled().then((isEnabled)=>{
if(isEnabled){
console.log('修改成功，当前开机⾃启状态: ', LoginItemSettings().openAtLogin)
return
}
<('重试再次开启....', LoginItemSettings().openAtLogin)
console.log('修改成功，当前开机⾃启状态: ', LoginItemSettings().openAtLogin)
}).catch((err)=>{
<(err)
})
}else{// 取消开机⾃启
launch.disable()
launch.isEnabled().then((isEnabled)=>{
if(!isEnabled){
console.log('修改成功，当前开机⾃启状态: ', LoginItemSettings().openAtLogin)
return
}
<('重试再次关闭....', LoginItemSettings().openAtLogin)
launch.disable()
console.log('修改成功，当前开机⾃启状态: ', LoginItemSettings().openAtLogin)
}).catch((err)=>{
<(err)
})
}
}
打包后查看⽇志
打包后调试⽐较⿇烦，遇到问题往往直接就挂了，所以需要导出⽇志⽂件：
// 只考虑⽣产环境
v.NODE_ENV==='production'){
const log =require('electron-log')
/
/ 重写 console 的⽅法，⽇志会在控制台输出，并且输出到本地⽂件。具体⽤法参考官⽅⽂档
Object.assign(console, log.functions)
// 获取本地⽇志⽂件路径
console.log('⽇志⽂件：', File())
}
打包运⾏后，可以在：~/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":"dinglife.electron-notifier",
"asar":false
}
打包后的应⽤中，源⽂件全部放在 app ⽬录下。
打包后如何发布到Github的release
package.json⽂件中，需要配置的内容如下
{
...
"scripts":{
"release":"node .electron-vue/build.js && electron-builder -p always"
},
"build":{
"publish":{
"provider":"github"
},
...
},
...
}
然后要将这个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进⾏发布。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。