Не удается найти «products.json» в файле с абсолютным путем в vue / webpack

Question

Я пытаюсь импортировать некоторые данные json из файла json в компонент.Цель состоит в том, чтобы импортировать json, а затем назначить его реквизиту, который экспортируется из родительского компонента.Затем импортируйте реквизиты в дочерний компонент, который с помощью v-for отобразит данные json в формате шаблона компонента.Хотя я новичок в Vue, и это пример продукта, из которого я пытаюсь поучиться.Так что он уже настроен для меня, и цель состоит в том, чтобы импортировать данные json.

Файл json находится в /src/assets/products.json'.В webpack.config.json я настроил данные для присваивания псевдонима:

  resolve: {
    modules: [path.resolve(__dirname, './src'), 'node_modules'],
    extensions: [".js", ".jsx", ".json"],
    alias: {
      Src: CONTEXT_PATH,
      products: path.resolve(__dirname, "./src/assets/products.json")
    },

Затем в product.vue, который предназначен для визуализации одного продукта, у меня есть следующее:

import products from './src/assets/products.json'

export default {
  props: ['productData'],

  data: () => ({
    hotDealsImg: 'https://www.roguefitness.com/skin/frontend/rg/2015/images/matte-black-friday/hot-deal-icon-2015.jpg',
  }),

И в products.vue,

import productData from '../components/product.vue'

Я получаю ошибку:

ERROR in ../node_modules/babel-loader/lib!../node_modules/vue-loader/lib/selector.js?type=script&index=0!./js/components/product.vue
Module not found: Error: Can't resolve './src/assets/products.json' in '/Users/mikeearley/code/front-end-dev-test-2/src/js/components'
resolve './src/assets/products.json' in '/Users/mikeearley/code/front-end-dev-test-2/src/js/components'
  using description file: /Users/mikeearley/code/front-end-dev-test-2/package.json (relative path: ./src/js/components)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Users/mikeearley/code/front-end-dev-test-2/package.json (relative path: ./src/js/components)
    using description file: /Users/mikeearley/code/front-end-dev-test-2/package.json (relative path: ./src/js/components/src/assets/products.json)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/mikeearley/code/front-end-dev-test-2/src/js/components/src/assets/products.json doesn't exist
      .js

Пример данных products.json, которые я пытаюсьимпорт:

  {
    "sku": "XX45",
    "name": "Rogue Gymnastic Wood Rings",
    "brand": "Rogue",
    "placeholder": "https://via.placeholder.com/200x200",
    "image": "https://www.roguefitness.com/media/catalog/product/cache/1/small_image/200x/9df78eab33525d08d6e5fb8d27136e95/r/o/rogue-wood-rings-th-resize_1_.jpg",
    "url": "https://www.roguefitness.com/rogue-dumbbells",
    "price": 7,
    "rating": 4.9,
    "startingAt": true,
    "specialPrice": false,
    "promotions": [
      "Made In USA",
      "3 Ships Free"
    ]
  },
  {
    "sku": "XX7337",
    "name": "The Ohio Bar",
    "brand": "Rogue",
    "placeholder": "https://via.placeholder.com/200x200",
    "image": "https://www.roguefitness.com/media/catalog/product/cache/1/small_image/200x/9df78eab33525d08d6e5fb8d27136e95/o/h/ohio-bar-th_1__2.png",
    "url": "https://www.roguefitness.com/the-ohio-bar",
    "price": 282,
    "rating": 4.9,
    "startingAt": false,
    "specialPrice": false,
    "promotions": [
      "Made In USA",
      "3 Ships Free"
    ]
  },