时间戳

首页 > 解决方案 > 导入json数据时VueJS编译失败

javascript - 导入json数据时VueJS编译失败

问题描述

我正在尝试在像这样的文件部分中导入静态.json文件<script>.Vueimport Test from '@assets/test.json'

根据我对 webpack 的了解，这应该是开箱即用的。我还尝试明确定义.jsonwebpack resolve 中的扩展和加载器下的 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文件只包含{}，但我也尝试过使用真实数据文件和相同的结果。

提前感谢您的帮助。

编辑：感谢@tao 帮助我在聊天中解决问题。这个错误确实是微不足道的：import Test from '@assets/test.json'应该是import Test from '@/assets/test.json'

标签： javascriptvue.jsnpmwebpack

解决方案

对于打字稿支持，您必须添加

"resolveJsonModule": true,

到. compilerOptions_tsconfig.json

并添加

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

给你的shims-vue.d.ts

在 Javascript 中，您不需要做任何特别的事情。这应该有效：

test.json：

{
  "foo": "bar"
}

您的*.vue证监会文件：

<script>
import * as json from './test.json';

export default {
  data: () => ({
    json
  }),
  mounted() {
    console.log(this.json)
  }
}
</script>

推荐阅读