vue-svg-loader 出现问题 - 缺少模板或渲染功能

Question

我在尝试让 vue-svg-loader 工作时遇到问题。我在插件的问题部分发布了这个，但我不确定是不是，或者只是我实现错了。

我对 Vue 还很陌生，如果我在实施它时犯了一个非常愚蠢的错误，请道歉。

当我运行 vue --version 时，它说我在 @vue/cli 4.5.9

这是我的组件内部的代码：

<template>
  <div>
    <SampleSvg />
  </div>
</template>

<script>
import SampleSvg from "@/assets/sample.svg"

export default {
  name: "HelloWorld",
  components: {
    SampleSvg
  },
};
</script>

这是我的 vue.config.js 文件：

module.exports = {

  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule
      .use('babel-loader')
      .loader('babel-loader')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  },

  css: {
    loaderOptions: {
      sass: {
        prependData:
        `@import "@/assets/scss/globals/_variables.scss";
          @import "@/assets/scss/globals/_variables-font-sizes.scss";
          @import "@/assets/scss/globals/_colours.scss";
          @import "@/assets/scss/globals/_mixins.scss";
        `
      },
    },
  },
};

这是我的 package.json 文件

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "postcss": "^8.3.6",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "prettier": "^2.2.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "style-resources-loader": "^1.4.1",
    "vue-svg-loader": "^0.17.0-beta.2",
    "vue-template-compiler": "^2.6.14"
  }
}

我得到的错误是：

[Vue warn]: Component is missing template or render function. 
  at <SampleSvg> 
  at <HelloWorld onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App>

如果我打开 sample.svg 文件，我有这个代码：

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
   <circle cx="50" cy="50" r="40" stroke="deeppink" stroke-width="2" fill="#ffe6ee" />
</svg>

我对 Vue 还很陌生，如果这取决于我的安装方式，我深表歉意。

Answer 1

我的设置如下 - 但由于我想同时引用内部和外部 SVG（这意味着我希望能够将 SVG 作为 Vue 组件导入或者能够将其放入 IMG 标签的 SRC ) 当我想接收一个组件时，我使用?int 修饰符发出信号。如果没有这个修饰符，导入的将是图像本身。

    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    svgRule
      .oneOf('inline')
      .resourceQuery(/int/) // internal SVGs must be in the form - import svgComponent from "@/images/example.svg?int" !!!!!
      .use('babel-loader')
      .loader('babel-loader')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
      .options({
        svgo:
        {
          plugins: [
            { inlineStyles: { onlyMatchedOnce: false } },
            { removeXMLNS: true },
            { removeViewBox: false },
            { removeDimensions: true },
          ]
        }
      })
      .end()
      .end()
      .oneOf('external')
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 4096,
        fallback:
          {
            loader: 'file-loader',
            options:
              {
                name: 'img/[name].[hash:8].[ext]',
              }
          }
      });