1

Vue.js 开发人员，

我有一个存储在 .js 文件中的数据集（现在使用 .js 的原因是我可以保留评论等）。

我的目录结构如下所示：

├── data
│   ├── cards
│   │   ├── en.json
│   │   ├── fr.json

在我的应用程序的某处，我导入该数据，然后在我的数据中声明它。

import Cards from '@/data/cards/en.js';
data() {
  return {
    cards: Cards, // < Imported.
    ...
  }
}

我想要完成的是根据我的 .env 文件中设置的语言属性导入该语言环境文件VUE_APP_LANG=en。

解决这个问题的最佳方法是什么？虽然我知道这是不可能的，但使用字符串文字（例如import Cards from `@/data/cards/${curLang}.js`;）导入会很好。

我知道，是的，我可以将两者组合在一个Cards.js文件中，然后让我的数组返回一个对象，每个语言环境一个对象，但它并不那么干净。我的偏好是将语言环境数据保存在其自己的专用文件中。

是的，我也知道可用的插件，例如vue-i18n，不幸的是它有特定于我的项目需求的缺点。

提前致谢！

4

3 回答 3

0

那些lang文件不能是json吗？如果这些 lang 文件中除了数据之外还有 js 函数，那么将其实现为工厂函数可能会更好。

但如果它只是纯数据，为什么不是 json？或者如果它真的需要在 js 上，为什么不把它全局附加或放在 vuex 上呢？所以你不需要导入它。

而且由于您会将其作为数据添加到当前的 Vue 组件实例中，因此可能只需将其放在 vuex 上并将其添加为计算属性。

您始终可以使用检查 .env 上设置的当前 VUE_APP_LANG

process.env(VUE_APP_LANG)
于 2020-09-18T16:22:04.837 回答
0

尝试这个：

const card = () => import "./Card"
于 2020-09-18T16:57:08.673 回答
0

您实际上可以使用动态导入

import(`@/data/cards/${curLang}.js`).then(module => {
  // do something with the translations
});
于 2020-09-18T15:53:01.343 回答