VUE3如何读取本地json文件

首先需要安装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请求数据

<script setup>
import { getCurrentInstance } from "vue";

const { proxy } = getCurrentInstance();

proxy.$axios.get("/public/XXXXXX.json").then((res) => {
  console.log(res);
});
</script>

当然，VUE3也可以直接读取本地json文件

import TestJson from "@/data/test_json.json";
console.log(TestJson);