Vue3 和 Vite 使用 Typescript 加载 JSON 失败

我正在从 Vue 2 迁移到 Vue 3。先做测试应用。

我在导入 JSON 文件时遇到问题。

文件存在。尝试了所有这些变体：

import { sites } from "./data/sites.json";
import sites from "./data/sites.json";
import sites from "../data/sites.json";
import sites from "@/data/sites.json";

https://www.koderhq.com/tutorial/vue/local-json/ 和 https://codesandbox.io/s/z2mpz6zq23?file=/src/components/HelloWorld.vue

沙盒链接 - 开发 - 这不起作用

谢谢 @Tolbxela 我试过了那个：

答案＃1

你的 Codesandbox 链接无法运行，所以我在 StackBlitz 上重新创建了它。

你的目录布局看起来像这样：

src
├── components
│   └── GoodTable.vue
├── data
│   └── sites.json

请注意 import rows from './data/sites.json' 位于 src/components/GoodTable.vue 中。./data/sites.json 是相对路径，因此查找是相对于导入文件所在的目录，也就是 src/components。src/components/data/sites.json 不存在，因此 Vite 会显示错误。

JSON 文件实际上位于 src/data/sites.json 的上一级父目录，因此您需要更新导入路径为：

import rows from '../data/sites.json'

演示

答案＃2

您在沙箱中的应用运行良好。请查看截图。

我猜问题出在你的浏览器上。请确保它支持 import 语句（MDN）。

更新：

我已经检查了你的截图。你在 Vite 中有一个导入问题 (plugin:vite:import-analysis)

查看这些链接以解决问题：

Vite - 动态导入

StackOverflow - 插件:vite:import-analysis - 无法解析导入分析的源，因为内容包含无效的 JS 语法。- Vue 3