如何使用 VueJS/Typescript 导入 JSON 文件? [英] How do you import a JSON file with VueJS / Typescript?
问题描述
我刚刚创建了一个干净的 VueJS 新项目,但无法加载 JSON 文件.
复制/发行
为了便于复制,我为我的问题创建了一个 Github 存储库:找不到模块'@/assets/hi.json'
运行 NPM Serve 时弹出以下错误:
我已经尝试过的
我已经搜索了所有 stackoverflow 并尝试了以下帖子中的所有内容:
https://github.com/chybie/ts-json
编辑 1:
好的,我现在在运行 npm run serve
时设法让它工作,方法是将它添加到 tsconfig.json:
<代码>{编译器选项":{"resolveJsonModule": 真}}
然而,VSCode 中的错误似乎仍然存在.有没有办法解决这个问题?
只需将 resolveJsonModule": true
添加到 compilerOptions
下的 tsconfig.json
>:
diff --git a/tsconfig.json b/tsconfig.json索引 499f5e2..a05dab1 100644--- a/tsconfig.json+++ b/tsconfig.json@@ -6,6 +6,7 @@"jsx": "保留",importHelpers":真,"moduleResolution": "节点",+ "resolveJsonModule": 真,"esModuleInterop": 真,allowSyntheticDefaultImports":真,"sourceMap": 真,
I just created a clean VueJS new project and I can't get loading a JSON file to work.
Reproduction / Issue
For easy reproduction I've created a Github repo with my issue: https://github.com/devedse/VueJSImportJsonFile
In the Home.vue page I'm trying to get Json loading to work. (https://github.com/devedse/VueJSImportJsonFile/blob/master/src/views/Home.vue)
When you open this solution in VSCode the following line shows an error:
import theJson from '@/assets/hi.json';
Can't find module '@/assets/hi.json'
When running NPM Serve the following error pops up:
What I've already tried
I've already searched all of stackoverflow and tried everything in the following posts:
Importing json file in TypeScript
Typescript compiler error when importing json file
https://github.com/chybie/ts-json
Edit 1:
Ok I now managed to get it to work when running npm run serve
by adding this to the tsconfig.json:
{
"compilerOptions": {
"resolveJsonModule": true
}
}
However the error in VSCode seems to stay. Is there a way to fix this too?
Simply add resolveJsonModule": true
to your tsconfig.json
under 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,
这篇关于如何使用 VueJS/Typescript 导入 JSON 文件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!