webstorm的pug自动生成的html出现乱码如何解决

问题现象

webstorm编辑的Pug文件，如果安装了 Pug和pug-cli，是可以自动生成对应的html文件的，具体方法可以自行上网搜“webstorm pug”。

但是，我用express框架生成的项目，编辑新的pug文件，如 test.pug,  生成的 test.html 在webstorm编辑器显示正确：

但用浏览器打开测试，中文显示乱码：

解决方法

经过多方分析发现，如果用webstorm新建一个html文件，会在head自动加入编码选项：

<meta charset="UTF-8">

用浏览器打开测试没有问题。

因此，解决方法是在express自动生成的layout.pug中，加入如下行：

meta(charset="UTF-8")

完整的layout.pug文件如下：

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel="stylesheet" href="/stylesheets/liMarquee.css")
    meta(charset="UTF-8")
  body
    block content

这样，所有其他引用了 layout.pug的pug文件，生成的html都会带 UTF-8的声明，浏览器显示就不会有问题了。

其他说明

如果不是直接用浏览器查看生成的html，而是在Node.js中看最终显示结果，即便在layout.pug中不声明UTF-8编码，中文显示都没有问题，貌似Node.js对编码会做一些处理。

然而，为了兼容性起见，还是加上这一行比较好吧。