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";
`
},
},
},
};

这是我的包裹。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]',
}
}
});