0

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

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>and 导入之前执行 if/else ，但这似乎不是导入它的理想方式。

4

1 回答 1

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

于 2018-03-16T20:13:08.037 回答