因为 chrome 的语言翻译导致的网页文本错误

之前有一个用户反馈了一个 bug，在网页上用户编辑的文本展示出现了错误，甚至包括一些系统文本出现了显示错误的情况。

开始调查
先试着再现一下。好的，没能成功操作出来
然后查了代码，发现代码的结构非常简单，基本不太可能是代码有 bug，先排除这个原因。
接下来猜想是否是 markdown 影响了，因为用户编辑的文本支持 markdown，在页面上我们把内容使用marked转换为 markdown 展示，也只有markdown会对用户的文本再做加工。
遗憾的是，简单地分析一下之后，也排除了这个原因，因为有一些未被 markdown 转化的一些系统文本也出现了这个问题。
正在我一筹莫展的时候，突然瞟到了浏览器上的自动翻译

为什么被检测出来的是英文？接着，我点了一下中文，好家伙，用户的 bug 直接再现了。
最终确定了，是 chrome 浏览器把页面上的中文又翻译了一次，导致文本错误。
但是，为什么呢？我想起系统中有两个页面做过国际化，这就是其中的一个页面，是否是被国际化影响到的呢？我赶紧去了另外一个页面，可惜的是并没有想象中的浏览器的翻译提示弹窗，也就是没有问题。
于是我又去查了查，chrome 到底是怎么把网页判断到底是哪种语言的
Inside Google’s language detection tool – Global by Design 这篇文章介绍了一下 chrome 是如何分析网页所使用的文本，大体根据网页中的文本的语言进行分析的，通过扫描一大片文本，然后进行语言对比。

有了这些结论，我仍然没弄明白，按理说，虽然做了国际化，但选择使用的是中文，那页面上显示的就应该是中文，那 chrome 分析出来的就应该是中文。
然后我做了一个猜想，虽然这两个页面都做了国际化，虽然都是 vue 的单页应用，但一个页面把页面所有的节点都提前渲染出来了，国际化使用的是 rails 的 I18n，在浏览器接收到时，已经是中文了。而另一个页面则是完全的 vue 组件，国际化使用的是 i18n-js，在渲染时，并没能得到页面上的中文，而是类似于 t('xxx.yyy.zzz') 所以被判断为英文。

这个原因目前也只是一个猜想

有了这个原因之后，问题也好解决了，在页面渲染时直接指定一个语言(用户选择或者浏览器设置的默认语言)，不让chrome 去自动分析，就解决了 html lang=I18n.locale
有了这个指定之后，浏览器不再自动提示我这个页面是英文的了，除非我在网站的国际化设定中将页面指定为英文，此时才会提示我是否翻译页面的英文。
除此之外，还可以meta name="google" content="notranslate"直接强制不让翻译

ps：上面的截图里还有个『一律翻译英语』，用户可能就是把这个选项勾选了