Javascript 在svg sprite loader、Vue.js&；中未找到相关模块；网页2

我正试图将svg sprite loader添加到我的项目中，但我一直遇到这个错误，它找不到模块。有人能帮我澄清为什么会发生这种情况吗

错误

未找到这些相关模块：

./rench.svg in./src/assets/svg^./.*.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
         })
}

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

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

build/utils/sprite.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
         })
}

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

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

src/main.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
         })
}

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

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>

找不到此相对模块： *./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

（1） 您可以尝试删除节点模块中的缓存文件夹：

node\u modules/.cache

（2） 您还可以尝试在require（）中使用@。在以下情况下，程序将在

src/assets/svg/

中搜索svg文件：

require(`@/assets/svg/${this.name}.svg`)

我希望这对你有帮助。。我也犯了同样的错误，第二个解决方案为我解决了这个问题。