Webpack 从json文件导入VueJS组件

我们这里有一个有趣的项目/问题（关于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]));
}

这个想法失败了。组件找不到，或路径错误等。 我还用承诺重写了我的循环，因为

import

返回一个承诺，但这也不起作用。这个想法完全没有意义，还是存在解决方案

谢谢，

---

Allan

我在以前的一个项目中遇到了这个问题，通过导入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": []
    }
}

<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文件中包含的所有组件：

{
   "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": []
    }
}

<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>

从“../components.json”导入componentsJSON；
导出默认值{
数据（）{
返回{
json:Object.entries（componentsJSON）
}
}
}

---

希望能有帮助

我在以前的一个项目中遇到了这个问题，通过导入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": []
    }
}

<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文件中包含的所有组件：

{
   "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": []
    }
}

<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>

从“../components.json”导入componentsJSON；
导出默认值{
数据（）{
返回{
json:Object.entries（componentsJSON）
}
}
}

---

希望能有帮助

您需要先读取JSON文件，然后才能从中获取值（它不像JS文件那样导出变量）。使用内置的

fs

模块读取文件，

JSON.parse（）

解析数据，然后像从parsedJSON.devices导入组件设置一样使用它其中

parsedJSON

是从文件中读取的解析数据。您需要先读取JSON文件，然后才能从中获取值（它不会像JS文件那样导出变量）。使用内置的

fs

模块读取文件，

JSON.parse（）

解析数据，然后像从parsedJSON.devices导入组件设置一样使用它where

parsedJSON

是您从文件中读取的解析数据。谢谢你们两位，我将在几天后对此进行测试，现在我正在处理其他项目，但我将在那时候回答/评论/标记/投票。谢谢你们两位，我将在几天后进行测试，现在我正在处理其他项目，但我将在那时候回答/评论/标记/投票。