我正在尝试将一些json数据从json文件导入到组件中 . 目标是导入json，然后将其分配给从父组件导出的props . 然后将props导入子组件，这将使用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"
    ]
  },
javascript json vue.js webpack