win环境,electron的console输出中文乱码问题的解决方案

2019-02-24 09:49:49

既然是cmd,那么,就发生在windows环境下了。本文描述的是:window环境下,electronconsole.log调试中文乱码的问题,如何解决。

前文回顾

关联文章是:《electron的log调试手段,可用于白屏调试》

在上述这篇文章中,并没有提及console.log中文输出乱码的事情。是因为我们的范例环境是macmac下面并没有中文乱码问题。

症状描述

采用的是改造版的quick-start作为本文demo,试图在开启--enable-logging的情况下,在主进程和渲染进程两个地方,都用console.log输出中文字符。


win环境,electron的console输出中文乱码问题的解决方案 - 001
win环境,electron的console输出中文乱码问题的解决方案(图9-1)



win环境,electron的console输出中文乱码问题的解决方案 - 002
win环境,electron的console输出中文乱码问题的解决方案(图9-2)


window下的结果如图所示:


win环境,electron的console输出中文乱码问题的解决方案 - 000
win环境,electron的console输出中文乱码问题的解决方案(图9-3)


chcp

如果大家经历过asp时代的话,就知道:每个asp页面代码的顶部,都必须定义一个数字表示的字符集。而常见的gb2312的值是936utf8的值是65001

这个定律一样适用于cmd,我们可以使用chcp来查看一下cmdcodepage值。

Bash

chcp

我们果然得到了个936的默认值。


win环境,electron的console输出中文乱码问题的解决方案 - 003
win环境,electron的console输出中文乱码问题的解决方案(图9-4)


目前一般网页都是utf8编码的,我们所以需要把chcp改成65001

Bash

chcp 65001
electron . --enable_logging

chcp 65001会新建一个cmd窗口,在这个窗口中,我们看到了我们想要的结果。


win环境,electron的console输出中文乱码问题的解决方案 - 004
win环境,electron的console输出中文乱码问题的解决方案(图9-5)


然而,我们关闭这些窗口后,再次打开一个cmd,活动页编码又变回了936。这就需要我们下一步进行设置。

注册表regedit

window下面的cmd的所有设置都是会读取注册表的。注册表的位置为:HKEY_CURRENT_USER\Console\%SystemRoot%_system32_cmd.exe 。如果没有看到这个路径的话,可以自己新建一个。或者去修改一下cmd的窗口属性,就可以自动生成这个注册表路径了。


win环境,electron的console输出中文乱码问题的解决方案 - 008
win环境,electron的console输出中文乱码问题的解决方案(图9-6)


我们新建一个32位dword,名字叫做CodePage,然后值是十进制的65001即可。


win环境,electron的console输出中文乱码问题的解决方案 - 009
win环境,electron的console输出中文乱码问题的解决方案(图9-7)



win环境,electron的console输出中文乱码问题的解决方案 - 010
win环境,electron的console输出中文乱码问题的解决方案(图9-8)


反映到注册表文件上,就是下面这样的,所以你也可以把下面的代码,保存为.reg文件,然后双击导入即可。

[HKEY_CURRENT_USER\Console\%SystemRoot%_system32_cmd.exe]
"CodePage"=dword:0000fde9

成功显示中文log

通过regedit操作之后,新开一个cmd之后,查看chcp,显示为65001。然后,就可以正常显示electron的中文log了。完美!


win环境,electron的console输出中文乱码问题的解决方案 - 011
win环境,electron的console输出中文乱码问题的解决方案(图9-9)


题外话补充方案

本文看完之后,大家应该可以知道:核心内容就一句话:chcp 65001。那么,您其实也可以把chcp 65001作为你npm命令的一部分,也许是个可行的解决方案。

Bash

"script":{
   "start":"chcp 65001 && ......",}

这个方案就做个补充吧?也许您喜欢这种方案呢。

总结

更多electron的功能技巧,请查看。


  • 2020-01-16 08:52:22

    Vue函数式调用组件创建公共组件

    所有组件都需要这么去调用,就会有些许麻烦而且不太美观。像Loading、Toast等这些组件,一页面可以经常用到而且每次显示的内容都可能不一样,这样的话用js的方式【this.$xxx.show(option)】去调用就方便很多,而且代码也更整洁。

  • 2020-01-17 08:37:26

    css transition分别指定多个属性

    transition有四个属性,很多人都会遗忘,分别是transition-property,transition-duration,transition-timing-function,transition-delay,尤其是transition-delay,这个可以实现延迟动画

  • 2020-01-17 08:44:57

    vue keepalive 前进刷新后退不刷新终极解决方案

    另外,我们做路由的时候要有意的根据页面等级做出路由的长度 比如 /a是一级的页面/a/b是二级的页面,下面的文章大家也可以通过判断path的长度来计算rank值,不用有意自定了 这样做的好处有两点,一个就是前进刷新,后退不刷新,还有就是,如果我们做页面进出效果的时候也能排上用场。

  • 2020-01-17 15:28:24

    深入理解vue中的slot与slot-scope

    vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率、使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经可以写基础组件了”,于是就关闭了vue说明文档。