如何使用 VueJS / Typescript 导入 JSON 文件？

Posted 2023-02-22

【中文标题】如何使用 VueJS / Typescript 导入 JSON 文件？

【英文标题】：How do you import a JSON file with VueJS / Typescript?

【发布时间】：2019-06-25 21:11:17

【问题描述】：

我刚刚创建了一个干净的 VueJS 新项目，但无法加载 JSON 文件。

复制/发行

为了便于复制，我为我的问题创建了一个 Github 存储库： https://github.com/devedse/VueJSImportJsonFile

在 Home.vue 页面中，我试图让 Json 加载工作。 (https://github.com/devedse/VueJSImportJsonFile/blob/master/src/views/Home.vue)

当您在 VSCode 中打开此解决方案时，以下行显示错误：

import theJson from '@/assets/hi.json';

Can't find module '@/assets/hi.json'

运行 NPM Serve 时会弹出以下错误：

我已经尝试过的

我已经搜索了所有的 *** 并尝试了以下帖子中的所有内容：

Importing json file in TypeScript

Typescript compiler error when importing json file

https://github.com/chybie/ts-json

编辑 1：

好的，我现在在运行 npm run serve 时设法让它工作，方法是将它添加到 tsconfig.json：

  "compilerOptions": 
    "resolveJsonModule": true
  

但是 VSCode 中的错误似乎仍然存在。有没有办法解决这个问题？

【参考方案1】：

只需将resolveJsonModule": true 添加到tsconfig.json 下的compilerOptions：

diff --git a/tsconfig.json b/tsconfig.json
index 499f5e2..a05dab1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,6 +6,7 @@
     "jsx": "preserve",
     "importHelpers": true,
     "moduleResolution": "node",
+    "resolveJsonModule": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,