uni-app如何读取本地json数据文件并渲染到页面上

// cityData.json
// 必须是""格式，否则报错
[
  {"id":"1","city":"深圳"}, {"id":"2","city":"广州"}
]

<template>
  <view v-for="item in localData">
    <text>{{item.name}}</text>
  </view>
</template>
 
<script>
  const cityData = require('@/data/cityData.json')
  export default {
    data() {
      return {
        localData: cityData
      }
    },
    onLoad() {
      console.log('cityJson:'+JSON.stringify(cityData));
      //=>cityJson:[{id:'',city:''},{id:'',city:''}]
    }
  }
</script>

$.getJSON('../../data/cityData.json').then((res)=>{
  console.log('cityJson:'+JSON.stringify(res));
});
//=>cityJson:[{id:'',city:''},{id:'',city:''}]

// data.js
const cityData = [
  {id:'1',city:'深圳'}, {id:'2',city:'广州'},
]
module.exports = {
  cityData: cityData
}
 
 
// index.vue
<template>
  <view v-for="item in localData">
    <text>{{item.city}}</text>
  </view>
</template>
 
<script>
  import data from "@/data/data.js"
  export default {
    data() {
      return {
        localData: data.cityData
      }
    },
  }
</script>

// data.js
const cityData = [
  {id:'1',city:'深圳'}, {id:'2',city:'广州'},
]
function refresh(){
 return ''
}
export {
  cityData,
  refresh
}
 
// index.vue
<template>
  <view v-for="item in localData">
    <text>{{item.city}}</text>
  </view>
</template>
 
<script>
  import {cityData, refresh} from "@/data/data.js"
  export default {
    data() {
      return {
        localData: cityData
      }
    },
    onLoad() {
      console.log(refresh())
      console.log(JSON.stringify(cityData))
    },
  }
</script>