如何解決html utf-8無法解析問題(mac 語系設定問題)

5 min readSep 4, 2020

前言：

昨天心血來潮，決定要來更新一下macOS作業系統-Catalina，一開始其實還是會有疑慮會不會系統太雷，因此而無法使用。但因為最近蘋果股價漲很兇，想說就相信他一次，所以也沒有另外爬文，一時的衝動就更新了。沒想到更新完後惱人的蟲子跑出來了，我的html中文失效，且完全變成亂碼。

講到這邊，你可能會問，變成亂碼是什麼情況？頁面呈現又是如何？如下圖(一) 你可以看到變成很奇怪的符號，但畫面卻是正常的。此時我立馬想加中文，看看會發生什麼事。沒想到，中文讀不到了。

這時就要開始去思考問題到底出在哪？還有哪些設定會出現這樣的問題？一開始聯想到就是mac更新惹的禍，但因為他是html，所以一開始還是找html試試看有沒有可能不用任何系統的方式就能解決。

於是找到很多如下的解法，像是加上Meta Tag等，但加了之後還是一樣無法解決問題。

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

此時就在思考是不是編輯器的問題，於是打開terminal，vim到指定檔案編輯後，發現裡面也是亂碼，如果用而上面圖(二)加了中文後，終端機裡面會顯示問號(？？？)，如果硬要在終端機打中文時，當我儲存後重新進入還是顯示問號(？？)。

截至目前為止，可以推測並不是編輯器的問題，應該是系統的問題。

此時想到如果有其他主機(本機or雲端)可以測試，可以用同樣方式，如果都正常，那就是mac更新完動到系統環境的關係導致。

經過各種爬文後，發現mac系統設定裡面有個語系locale。

終端機輸入locale後，可以發現裡面有個LC_ALL= 這邊是空白的，後來發現這邊需要放入語系。因為我是用繁體中文，因此就用zh_TW，這邊可以查詢語系列表。接著到終端機輸入 export LC_ALL=zh_T.UTF-8。之後可以看到都改成繁體中文了。

$ locale
$ export LC_ALL=zh_TW.UTF-8

為了排除其他因素，我們先用終端機開啟，因為不確定編輯器會不會也因為系統更新後被修改。

開啟後發現終端機裡面用vim編輯是正常的，也可以直接在裡面修改。

但到這邊還沒完，用VS Code再開啟，你會發現，疑！？怎麼都還是亂碼？那這時候就可以懷疑是VS Code也有問題了。為了證明VS Code設定有被更改，再用另外一個編輯器開啟(這邊我用atom)，來比較。

會發現，其他編輯器都沒問題，就VS Code最特別。所因此最後一步就是讓VS Code顯示中文不要是亂碼就能結案了。

經過爬文後，發現VS Code下方裡面有個Select Encoding，如下圖(五)，只要讓他是UTF-8即可

到這邊如果觀察力夠好的人，平常再coding的時候應該有發現下方都有個UTF-8，如果再有點coding sense應該就能夠直覺聯想到，應該是編碼的問題，就能更快解決此問題，所以平常在寫code時，多一點觀察，對於我們抓蟲子會有很大的幫助。

PS: 也可以直接到VS Code裡面設定encoding。可以參考這裡

"files.encoding": "utf8"

總結上述可以得出幾個結論。