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]));
}

这个想法失败了。找不到组件，或者路径错误等。我还用 Promise 重写了我的循环，因为import返回了一个 Promise，但这也不起作用。这个想法是完全没有意义的，还是存在解决方案。

谢谢，艾伦

标签： webpackvuejs2

我在以前的项目中遇到了这个问题，并解决了它导入 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>

希望能帮助到你！！

webpack - 从 json 文件导入 VueJS 组件

问题描述

解决方案

推荐阅读