每个人都可以，
拥有SSL证书

有次用 vue-cli 搭的项目，执行 npm run serve 一切正常，终端也没报错，但是浏览器打开 localhost:8080 一看，页面直接乱码。

第一反应是是不是哪个文件保存的时候编码没选对，后来顺着这个方向慢慢摸了一遍，发现能踩的坑其实就那么几个，记一下吧。

最先想到的是浏览器自己设的编码不对。Chrome 的设置里可以手动切换页面编码，试试从 UTF-8 切到 GBK 或者反过来，很多时候就能马上看出是不是这里的问题。如果一切换就正常了，那基本就是浏览器猜错了，强行指定一下就好了。

如果切换编码没效果，下一个动刀的地方是缓存。

浏览器缓存里有时候会残留一些旧版本的资源，请求没走 200 直接走了缓存，旧的乱码内容又给你吐出来。清了浏览数据再重新加载一次，很快能排除掉。

缓存也清了，还是乱码，就该看页面源代码里的编码声明了。用开发者工具打开，看看 head 里有没有一句像样的 meta 声明：

<meta charset="UTF-8">

很多模板文件可能因为编辑器原因被存成了其他编码，但声明还是 UTF-8，浏览器按声明去解析就对不上，这时候要么改文件的实际编码，要么把声明改成一致的值。

我一般习惯直接把文件另存为 UTF-8，再确认声明是 UTF-8，省得反复猜。

如果只是某个单独的 HTML 文件乱码，上面的排查基本够了。但 Vue 项目里大部分页面是组件编译出来的，问题就可能在编译链路上。

一个很多人会绕进去的地方是服务端响应头。

虽然我们用的 webpack-dev-server 一般都会自动把 Content-Type 带上 charset=UTF-8，但假如你的项目里额外写了一个简单的后端——比如说用 Express 做了个代理——那就要留意服务器有没有显式设置过响应头。我见过有人写接口的时候忘了加编码声明，返回的 HTML 片段就没带 charset，浏览器按默认 latin-1 去解析，结果中文全挂。类似下面这种显式设置一下就踏实了：

res.setHeader('Content-Type', 'text/html; charset=UTF-8');

再说一个不太容易被注意到的点——项目本身的依赖和 webpack 配置。

有时候某个 loader 抽风，或者版本没装对，导致 .vue 文件里的 template 没被正确编译，输出了非预期的字节。这种时候去检查一下 package.json 里依赖是否完整装好，以及 webpack 配置文件有没有奇怪的规则，往往能发现问题。倒不一定每次都是大问题，有时候就是少个 loader 或者插件版本冲突。

如果以上都试了一圈依然如故，我会换个浏览器甚至换台设备访问同一个地址。

大概率是本地浏览器环境有什么奇怪的设置，比如插件篡改了编码，或者系统语言区域把默认编码带偏了。换个环境能立刻验证是不是环境特异性的问题，避免一直在自己电脑上死磕。

乱码这东西排查起来没什么技术含量，就是顺着链路一点一点捋：文件编码、声明、响应头、缓存、环境。有一环不一致就会暴露出来。

真要还是搞不定，把现象发到社区或者找人问问，比自己闷头猜快多了。