Vue.js 动态导入答案

【问题标题】：Vue.js dynamic importsVue.js 动态导入
【发布时间】：2021-01-05 13:33:19
【问题描述】：

Vue.js 开发人员，

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

我的目录结构如下：

├── 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 这样的可用插件，不幸的是它有一些特定于我项目需求的缺点。

提前致谢！

【问题讨论】：

【解决方案1】：

你实际上可以使用dynamic imports

import(`@/data/cards/${curLang}.js`).then(module => {
  // do something with the translations
});

【讨论】：

【解决方案2】：

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

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

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

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

process.env(VUE_APP_LANG)

【讨论】：

【解决方案3】：

试试这个：

const card = () => import "./Card"

【讨论】：