VueJS ошибка компиляции при импорте данных json

Question

Я пытаюсь импортировать файл stati c .json в раздел <script> файла .Vue, например, import Test from '@assets/test.json'

На основании того, что я прочитал о веб-пакете , это должно работать из коробки. Я также попытался явно определить как расширение .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

Для поддержки машинописи вы должны добавить

"resolveJsonModule": true,

к compilerOptions в tsconfig.json.

и добавить

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

к вашему shims-vue.d.ts

---

В Javascript вам не нужно делать ничего особенного. Это должно работать:

test.json:

{
  "foo": "bar"
}

Ваш *.vue SF C файл:

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

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