VueJS编译失败,并带有静态json数据

问题描述 投票:0回答:1

我正在尝试将静态.json文件导入到我的Vue应用中,例如import Test from '@assets/test.json'

根据我对Webpack的了解,这应该可以立即使用。我也尝试过明确定义webpack resolve中的json扩展名和加载器下的json加载器。

但是,对我来说,它失败并显示以下错误:

ERROR  Failed to compile with 1 errors                                                                                                                                                                                                     9:14:24 AM

This dependency was not found:

* @assets/test.json in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Settings.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save @assets/test.json

这似乎很奇怪,因为它不是我可以安装的依赖项(?)。

我的test.json文件只包含{},但我也尝试过使用真实的数据文件和相同的结果。

这个问题可能有一个非常明显的答案,但我似乎找不到。我是Vue / javascript / frontend的新手,所以在此先感谢您的帮助!

javascript vue.js npm webpack
1个回答
1
投票

它确实可以使用javascript(<script lang="js">)开箱即用。为了支持打字稿,您必须添加

"resolveJsonModule": true,

compilerOptions中的tsconfig.json

并添加

declare module '*.json' {
  const value: unknown;
  export default value;
}

至您的shims-vue.d.ts

© www.soinside.com 2019 - 2024. All rights reserved.