导入json数据时VueJS编译失败

Question

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

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

提前感谢您的帮助。

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

Answer 1

对于 typescript 支持，您必须添加

"resolveJsonModule": true,

到compilerOptionstsconfig.json。

并添加

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

致您的shims-vue.d.ts

---

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

test.json:

{
  "foo": "bar"
}

您的*.vue SFC 文件：

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

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