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