Question

我们在这里有一个有趣的项目/问题（与感兴趣的Joomla！有关）。但是，在main.js中，我想导入一个json文件，例如：

import componentSetting from './plugin.components.json'

plugin.components.json看起来像

{
  "Devices": "./components/settings/devices.vue"
}

现在，我想动态地将其在那里定义的组件导入，例如：

for(let name in componentSetting){
    import(componentSetting[name])
    // or
    Vue.component(name, import(componentSetting[name]));
}

这个想法失败了。找不到组件，或路径错误等。我还用Promises重新编写了循环，因为import返回了Promise，但这也不起作用。这个想法是完全无稽之谈，还是存在解决方案。

谢谢，艾伦

Answer 1

我在先前的项目中遇到了这个问题，并解决了导入json文件并使用Object.entries遍历键的问题。

javascript文件：

import componentsJSON from './components.json'; 

Object.entries(componentsJSON).forEach( item => {
    Vue.component( item[1].basename, require(`${item[1].path}`).default  );
});

json文件：

{
   "Instagram": {
        "basename": "instagram", 
        "path": "./core/components/Instagram0501.vue", 
        "props": {
            "user-id": "1111",
            "access-token": "111",
            "limit": 5
        }
    },  
    "FeaturedProducts0501": {
        "basename": "featured-products-0501", 
        "path": "./core/components/products/FeaturedProducts0501.vue", 
        "options": []
    }
}

此外，我创建了一个组件，该组件呈现了该json文件中包含的所有组件：

<template>
   <div class="home" >

    <component v-for="(component, index) in json" 
               :key="'component'+index" 
               :is="component[1].basename" 
               v-bind="component[1].props">
    </component>

  </div>
</template>
<script>

    import componentsJSON from '../components.json'; 

    export default {
        data(){
            return {
                json: Object.entries(componentsJSON)
            }
       }
    }
</script>

希望有帮助！

从json文件导入VueJS组件

1 个答案: