Node.js、Vue.js，讀取“HTTP：接受語言”設置“導入”，然后為應用提供服務

Question

我正在使用 i18n 設置 vue.js 應用程序，因此我有多個用於不同語言的靜態翻譯文件，以及一個 ltr 和另一個 rtl 的兩個 css 文件。

現在，我將“en”設置為默認 lang，將 ltr 設置為默認 css，為它們提供服務，然后檢查用戶語言環境並根據用戶首選 lang 重新發送具有動態導入的正確文件。

我搜索了很多，但找不到讀取“HTTP：接受語言”設置“導入”的方法，然后從一開始就為應用程序提供正確的文件。

我知道 vue.js 是一個前端框架，但它是由 node.js 服務器提供的，所以一定有辦法。

Answer 1

不是這里的專家，但我看到的唯一正確的長期解決方案是進行服務器端渲染，盡管這需要一些工作。

作為一種短期解決方案，您還可以構建應用程序的所有不同版本並提供正確的版本，但這不是一個可擴展的解決方案。

Answer 2

您可以通過獲取nodejs部分的標題來獲取accepted language 。

所需的標題是req.headers["accept-language"] 。

那么就需要在vue端傳遞這些信息。 根據您集成vue方式，可以采用不同的路徑。

如果您使用模板來包含vue （例如 pug），您可以將語言作為模板變量傳遞，並根據所需的語言包含不同的css文件。
如果您使用imports包含vue那么您可以執行以下操作：
- 創建一個模塊，為該語言導出一個變量並將該變量設置為您從標題中獲得的值
- 在Vue端根據你剛剛設置的值導入模塊和導入css

Answer 3

我知道這是一個舊帖子，但是......

您可以使用：

navigator.language

我返回的正是你想要的。

除此之外，您還可以使用：

navigator.languages

它返回一個包含所有瀏覽器接受的語言的數組。 就我而言：

[ "pt-BR", "pt", "en-US", "en" ]

完整的教程（使用 n18i 和 vuex）可以在這里找到：

HTH