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()。因此，假设您在路由器导航防护中定义了区域设置。然后，获取内容并使用它。显然，要获取它需要在某个地方托管，所以你必须自己上传（或者使用像内容一样的服务）。

如何根据区域设置

1 个答案: