Question

我正在为我的应用程序使用vue-cli，并已将相应的配置添加到我的config/index.js文件中（根据https://vue-svg-loader.js.org/#vue-cli）：

module.exports = {
  build: {
    // Omitted for brevity
  },
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  },
  dev: {
    // Ommitted for brevity
  }
}

vue-svg-loader已使用npm install --save vue-svg-loader安装在我的项目中。

我的组件如下：

<template>
  <div>
    <svg-logo />
  </div>
</template>

<script>
  import svgLogo from './logo.svg'

  export default {
    name: 'app',
    components: {svgLogo}
  }
</script>

当我尝试加载页面时，在服务器控制台上出现的错误如下：

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|     <g fill="none" fill-rule="evenodd" stroke="#314659" opacity=".5">
|         <rect width="19" height="11" x="2.5" y="6.5" rx="2"/>

 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 98:0-74
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

我尝试加载的每个SVG都出现相同的错误。

我的设置是否存在明显的错误？

为什么我的vue-svg-loader配置无法识别SVG文件？

0 个答案: