如何根据语言环境导入/使用翻译文件

Question

所以，我列出了三种不同语言的国家/地区列表：

countries-fr.js
countries-en.js
countries-de.js

我希望仅根据所选语言在我的组件中要求这些文件。

目前我在做：

<template>
...
<p v-for="country in countryList"> {{ country.name }} </p>
...
</template>

<script>
import {EN} from '../../countries-en.js'
import {DE} from '../../countries-de.js'
import {FR} from '../../countries-fr.js'

export default {
  data () {
   EN, FR, DE
  },

  computed:  {
    countryList () {
      let lang = this.$store.state.user.lang

      if(lang == "EN"){return this.EN},
      if(lang == "FR"){return this.FR},
      if(lang == "DE"){return this.DE},
    }
  }
}

这显然有效，但我不喜欢我必须事先导入三个文件，如果我添加 100 种语言，那么我将不得不这样做。

所以，我的问题是：如何根据当前语言环境导入文件？

我可以在 <script> 之前执行 if/else 并导入，但这似乎不是导入它的理想方式。

Answer 1

如果你使用 webpack / 标准的 vue-cli 构建，你可以使用异步和动态导入。 这篇文章可以帮助你： https://medium.com/@michalozogan/how-to-split-moment-js-locales-to-chunks-with-webpack-de9e25caccea

基本上是

const content = () => import(`../../countries-${locale}.js`)

如果您不必捆绑文件，也可以在确定位置后使用fetch()。 因此，假设您在路由器导航守卫中定义了区域设置。然后，获取内容并使用它。显然，要获取它，它需要托管在某个地方，因此您必须自己上传（或使用类似内容的服务）。