Question

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

错误

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

建立/ 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
         })
}

建立/ 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'

未找到此相关模块： ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index?0&bustCache！。/ src中的。/ src / assets / svg / share.svg /icon.vue

Answer 1

(1) 您可以尝试删除 nodemodules 中的缓存文件夹：node_modules/.cache

(2) 您也可以尝试在 require() 中使用 @。在以下情况下，程序将在 src/assets/svg/ 中搜索您的 svg 文件：

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

我希望这对您有所帮助..我遇到了同样的错误，第二个解决方案为我修复了它。 https://www.thecodingcouple.com/vue-js-error-this-relative-module-was-not-found/

使用svg sprite loader，Vue.js＆amp; webpack2

1 个答案: