在vuejs页面中通过axios获取本地static文件夹下的json文件
vue cli3.0访问本地JSON文件
在vue-cli3中使用axios获取本地json
我最终采用了这个办法：
element-ui table 页面加载时，动态渲染后台传过来的数据（springmvc）
甚至有可能会出现这个bug
TypeError: props.sections.reduce is not a function
在我的项目中，json文件是一定要放到public文件夹中的：
关键代码部分：
值得一提的是：
也可以在main.js文件中写入下面的代码：
完整代码在这里~可以不用看 哈
<template> <el-main> <el-row> <el-col :span="6"> <el-label name="周报日期从"> <el-date-picker style="border-radius: 30px" v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> </el-label> </el-col> <el-col :span="4"> <el-label name="所属平台"> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select></el-label> </el-col> <el-col :span="4"> <el-label name="项目类别"> <el-select v-model="toobad" placeholder="请选择"> <el-option v-for="item in optionst" :key="item.valuel" :label="item.label" :value="item.valuel"> </el-option> </el-select></el-label> </el-col> <el-col style="float: right" class="button-group-no-wrap" :span="7"> <el-button round type="purple">导出</el-button> <el-button round type="deep-blue">搜索</el-button> <el-button round type="white">重置</el-button> </el-col> </el-row> <!--button--> <!--table--> <el-card> <el-row> <el-table ref="singleTable" highlight-current-row style="width: 100%" :header-cell-style="{background:'#E5E9F2'}" stripe :data="tableData" :height="600" > <el-table-column prop="num" label="序号" width="80" align='center' > </el-table-column> <el-table-column prop="proname" label="项目名称" width="350" align='center'> </el-table-column> <el-table-column align='center' prop="protype" width="150" label="项目类别"> </el-table-column> <el-table-column align='center' prop="leaddepart" width="200" label="需求牵头部门"> </el-table-column> <el-table-column align='center' prop="mass" width="150" label="体量"> </el-table-column> <el-table-column align='center' prop="status" width="400" label="状态(正常,计划不变实施延期,计划调整实施正常)"> </el-table-column> <el-table-column align='center' prop="recentwork" width="350" label="近期主要工作"> </el-table-column> <el-table-column align='center' prop="problemrisks" width="200" label="问题与风险"> </el-table-column> </el-table> </el-row> <!--page--> <el-row type="flex" justify="center"> <el-col :span="5"> <el-pagination background layout="total,prev, pager, next ,jumper" > </el-pagination> </el-col> </el-row> </el-card> </el-main></template><script> import axios from "axios"; export default { name: "acceptance", data() { return { search: { name: '', }, value1: '', tableData: [], /*tableData: [{ "num": "01", "proname": "智能注册评议系统", "protype": "新增需求", "leaddepart": "研发部", "mass": "29.9人/月", "status": "计划调整实施正常", "recentwork": "已经完成上线部署工作，开展上线后支持工作", "problemrisks": "--" }, { "num": "01", "proname": "智能注册评议系统", "protype": "新增需求", "leaddepart": "研发部", "mass": "29.9人/月", "status": "计划调整实施正常", "recentwork": "已经完成上线部署工作，开展上线后支持工作", "problemrisks": "--" }, ],*/ options: [{ value: '选项1', label: '示例平台1' }, { value: '选项2', label: '示例平台2' }, { value: '选项3', label: '示例平台3' }], optionst: [{ valuel: '选项1', label: '示例项目类别1' }, { valuel: '选项2', label: '示例项目类别2' }, { valuel: '选项3', label: '示例项目类别3' }], value: '', toobad: '' } }, mounted() { let _this =this; axios.get('./Proweekly.json').then((res)=>{ console.log(res.data.tableData); console.log(_this.tableData); _this.tableData = res.data.tableData; }) .catch(function(error){ console.log(error); }) } }</script><style scoped> .el-row { margin-bottom: 20px; }</style>