目前正在進行一個案子，裡頭有一項需求是「多國語言系統」，就是前端界面要有多國語言的選項可以去做選擇，預設是繁體中文，但也要能切換成英文、日文這樣，之前沒做過對我來說是一種新的挑戰。

這次專案所使用的是vue3 + vite的形式，所以使用載入的是 Vue-i18n。

照著下方參考來源第一篇做是沒問題，使用方法不難，但其實我在研究中有所誤解的地方，跟沒辦法一時就弄懂的部分，有跟一些前輩們進行交流，在這邊做個紀錄。

概念

網站上的多國語系其實會分成兩種，一種是data，另一種則是layout。

這邊的data指的是網頁上那些動態的資料，比如說像是我blog中一篇篇的新文章，而layout則是指網頁本身靜態的東西，像是我blog最上方的搜尋、首頁、文章總覽。

現在打開fb或是youtube，選擇切換語系，假設是選擇切換成英文版本，但就會發現並不是所有的東西都變成了英文字，可能裡面內容的本身、自己的名字不會跟著變成英文版本。

所以說假如內容也需要多國語系時，那麼文章的內容本身，也需要依照多國語系寫好幾份，並不是寫好一個中文版本就能用像是google翻譯翻全部，有那麼簡單就不需要做多國語系的功能了，假設文章要有三個語言的多國語系，那就得提供三種語言的版本。

前端做？ 後端做？

剛剛提到多國語系的data及layout，其實在實作上會是有差異的，最關鍵的部分是在於說到底得要前端來實作還是後端來處理。

首先data的部分基本上只能從後端來，像就是說一般的網站，獲取畫面的資料都是從後端開的api由前端打到畫面上，可能沒有需要多國語系的時候，只能單純的從api拿到中文資料，而就算要多國語系其實也是一樣的步驟，只是得改變請求的api參數，變成是我在打api給後端我所需要那個語言的api參數，後端就會給我不同語言的版本。

主要是這種data要從api來，才能做到動態更新的這件事情，不然前端寫死不管是要更新還是刪除都很不方便，所以多國語系的data基本上都是後端來處理。

接下來講講多國語系的layout。

它就比較屬於是可以前端做，也可以後端做的部分，全部都看需求及情境，比較沒有一定。

像是說網頁最上方的navbar的東西，其實完全寫死也沒有關係，因為比較不需要更頻繁做更改，這時候只要確認好翻譯的文件，每個語言的key跟value都達成共識，直接做在前端沒問題。

但如果今天是業主有想要，可能有特別的情境需求，希望也是從後端去直接控制這些網頁上區塊，那資料也是可以從後端回來，而不是在前端做。

所以是layout通常前端來做就可以，不過後端也行，完全取決於需求。

總結

自己研究的時後沒有data及layout的概念，以為全部都是前端做或是後端做，會想說我在前端先定義好key之後，再跟後端講我所定義的key，然後後端再給我各個語言擋的資料，但這是錯誤的觀念。

在多國語系這塊的話，前端反而應該是要跟後端討論api的語系參數，而如果是前端還要做多國語系的layout，則是應該要請業主方提供各國語言的檔案，包括key及value。

或是設計稿已經是中文版本的，但還沒有多國語系，那其實也可以前端先自己產出一個中文版本，key定義出來交給業主方，再請他們給其他翻譯語言的檔案。

參考來源