如何使用Vite从公共目录导入JSON文件？

Question

我有一个 Vue3/Vite 项目，其中必须从外部 JSON文件读取一些数据。

但是当我构建项目时 - JSON 文件被捆绑。

我需要将 JSON 文件保留在外部。

我尝试过的：

1. 第一次尝试 vite.config.ts

export default defineConfig({
  optimizeDeps:{
    exclude: ['myfile.json'] // then i tried ['**/myfile.json']
  },
})

2. 第二次尝试

vite.config.ts

assetsInclude: ['**/*.json'],
assetsInlineLimit: 0,

3. 第三次尝试

App.vue

let jsonData = import.meta.glob('/public/assets/myfile.json')

我做错了什么 - 有没有一种简单的方法可以将 JSON 文件保留在外部？

Answer 1

Nvm，在Vite中你直接使用fetch来抓取数据而不是import，这是不可能的。

这个讨论有官方答案

这就是如何实现你想要的

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

onMounted(async () => {
  const response = await fetch("/file.json");
  const file = await response.json();
  console.log("cool file", file);
});
</script>

具有以下结构

file.json存在

{
  "name": "bob",
  "age": 29
}

并得到以下结果