无法在vue / webpack中的绝对路径文件位置解析“ ​​products.json”

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"
    ]
  },