我正在尝试将svg-sprite-loader添加到我的项目中，但我不断收到此错误，它无法找到模块 . 任何人都可以帮我澄清为什么会这样吗？

Error

找不到这些相关模块：./ src / assets / svg ^ . / . * . svg $中的./wrench.svg ...

build/webpack.base.conf.js

{
     test: /\.(png|jpe?g|gif)(\?.*)?$/, // removed svg from the list
     loader: 'url-loader',
     options: {
         limit: 10000,
         name: utils.assetsPath('img/[name].[hash:7].[ext]')
     }
},
{
     test: /\.svg(\?.*)?$/,
         loader: 'svg-sprite?' + JSON.stringify({
             name: '[name]_[hash]',
             spriteModule: 'utils/sprite',
             prefixize: true
         })
}

build/utils/sprite.js

var Sprite = require('svg-sprite-loader/lib/web/sprite')

// Remove visibility:hidden
Sprite.styles.pop()
Sprite.styles.push('display:none')

var globalSprite = new Sprite()

if (document.body) {
  globalSprite.elem = globalSprite.render(document.body)
} else {
  document.addEventListener('DOMContentLoaded', function () {
    globalSprite.elem = globalSprite.render(document.body)
  }, false)
}

module.exports = globalSprite

src/main.js

import Icon from './icon.vue'
Vue.component('icon', Icon)

src/icon.vue

<svg class="icon" :class="'icon-' + name">
    <use :xlink:href="xlink"/>
  </svg>
</template>

<script>
export default {
    props: ['name'],
    computed: {
        xlink () {
            return require(`./assets/svg/` + `${this.name}.svg`)
        }
    }
}
</script>

如果我尝试从相对路径导入图标，我会收到以下错误：

import share from './assets/svg/share.svg'

找不到这个相关模块：* . / src / assets / svg / share.svg in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index?0&bustCache ！./ SRC / icon.vue

javascript svg webpack vue.js