如何使用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,