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

Z时代
2024-01-10
分类：技术分享

我需要将菜单配置成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ｎ文件？谢谢

回答

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',
        }],
    }
  }