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

前言:

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

HTML中文變成亂碼?

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

抓出bug的邏輯

這時就要開始去思考問題到底出在哪?還有哪些設定會出現這樣的問題?一開始聯想到就是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

修改完locales後測試

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

開啟後發現終端機裡面用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"

結論

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

  1. Mac的Catalina系統不要隨便亂更新,不然會花很多時間解決不相容的bug
  2. 如果出現html中文字無法顯示時,可能是環境問題也可能是編輯器的問題: 環境問題=>用terminal檢視。環境問題設定locales調整系統語系。
  3. 要培養平常coding的觀察力,對debug很有幫助

參考資料:

  1. 修改Mac Locale
  2. VS Code EnCoding Official
  3. Set VS Code EnCoding

Web Develop X Investor X Traveller 經濟系畢業。誤打誤撞開始從事網頁開發,熱愛分享學習知識及生活啟發。 關於我:https://chun-wei.com 聯絡信箱:jinwei@chun-wei.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store