首先需要安装axios
npm install axios --save
然后在main.js引用axios
import { createApp } from "vue";
import App from "./App.vue";
import axios from "axios"; // 安装axios后引入
const app = createApp(App);
app.config.globalProperties.$axios = axios; // 将axios挂载到原型上方便使用
app.mount("#app");
然后就可以使用$axios了,可是vue3没有this,所以需要用getCurrentInstance() 获取当前组件实例。
在app.vue里使用get请求数据文章来源:https://www.toymoban.com/news/detail-539845.html
<script setup>
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
proxy.$axios.get("/public/XXXXXX.json").then((res) => {
console.log(res);
});
</script>
当然,VUE3也可以直接读取本地json文件文章来源地址https://www.toymoban.com/news/detail-539845.html
import TestJson from "@/data/test_json.json";
console.log(TestJson);
到了这里,关于VUE3如何读取本地json文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!