Vue.js动态导入

如何解决Vue.js动态导入

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之类的可用插件，不幸的是，它具有我的项目需求所特有的缺点。

谢谢！

解决方法

您实际上可以使用dynamic imports

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

,

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

但是如果它只是纯数据，为什么不使用json？ 或者，如果真的需要在js上使用，为什么不将其附加到全局或放在vuex上呢？因此，您无需导入它。

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

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

process.env(VUE_APP_LANG)

,

尝试一下：

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