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

Question

我刚刚创建了一个干净的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服务时，会弹出以下错误：

我已经尝试过的

我已经搜索了所有stackoverflow并尝试了以下文章中的所有内容：

在TypeScript中导入json文件

导入json文件时出现Typescript编译器错误

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

编辑1：

好的，我现在设法通过将其添加到tsconfig.json来使其在运行npm run serve时起作用：

{
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

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

Answer 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,