uni-app加vue3常见问题
一、引入本地的JSON文件
1.fetch方法
使用fetch API
来加载本地JSON
文件。
<script>
fetch('/source/dataJson/drugsList.json')
.then(res=>res.json())
.then(data=>{
console.log(data)
})
</script>
fetch
函数的参数是本地JSON
文件路径,注意路径的正确,通过.then()
方法对数据进行解析响应,并通过.json()
方法转换为JSON格式
,最终打印出所需要的数据
学习地址
2.axios
1.安装axios
npm i axios -s
2.使用(drugList.vue)
<script>
import axios from 'axios'
axios.get('http://localhost:3000/source/dataJson/drugsList.json').then((res) => {
console.log(res)
})
</script>
3. Object.assign()
1.JSON文件(drugsList.json)
{
"code": 0,
"data": {
"b2cDirectoryIdChildList": [],
"brandIdChildList": [],
"commentImgUrl": "",
"commentLinkUrl": "",
"commentMsg": "",
"commentType": "1",
"deliveryText": "",
"filterInfoList": [],
"groupShops": [],
"isCityOpened": 0,
"isListData": 0,
"pageNo": 1,
"pageSize": 20
}
}
2.使用文件(drugList.vue)
<script>
import dataBasemap from '@/source/dataJson/drugsList.json'
export default {
data() {
let config = {
}
Object.assign(config, dataBasemap)
return {
drugsList: config
};
},
mounted(){
consloe.log(drugsList)
}
}
</script>
注意:
1.Vue3使用的是esModule(export导入,import引入)
,不支持commonJS
规范(require
引入)
2.uni.request
是无法读取本地的js文件和json文件的,jq
是能读取的,但是jq
只能在H5
端引入使用。