Vue中如何使用本地Json文件？

Question

我需要将菜单配置成Json文件，然后再程序中引入

<template>
    <a-menu>
        <template v-for = "(index,menu) in menuList">
                <a-menu-item v-if="!menu.children" :key="index">
                    <a-icon type="menu.icon"></a-icon>
                    <span>{{menu.name}}</span>
                </a-menu-item>
        </template>
    </a-menu>
</template>

<script>
    import menuListConfig from '../../config/menu.json'
    export default {
        name: "Sider",
        data(){
            return {
                menuList:JSON.parse(JSON.stringify(menuListConfig))
            }
        }
    }
</script>

需要如何做，才能v-for遍历jsoｎ文件？谢谢

Answer 1

webpack配置项增加json解析插件，并安装：

npm i json-loader -d //先装插件
修改webpack配置
//webpack.config.js 
module:{
    rules:[{
        test: /\\.json$/,
        loader: 'json-loader',
    }],
}

//或者vue.config.js
 configureWebpack: {
     module:{
        rules:[{
            test: /\\.json$/,
            loader: 'json-loader',
        }],
    }
  }

即便如此，还是先看看解析结果是啥再说：

import最好是加载js文件，条件允许还是不要用json文件，错误率会低一些，应为json文件的格式要求很高。