我尝试了以下内容：
https://github.com/visualfanatic/vue-svg-loader/tree/master
但是由于Vue 2中使用了vue-template-compiler，所以存在版本冲突。
我尝试了：
https://github.com/visualfanatic/vue-svg-loader
但是我缺少特定的Vue依赖项。
我注意到在使用TypeScript时有一个注意事项，需要声明类型定义文件。然而，我仍然得到了“无法找到模块'../../assets/myLogo.svg'或其对应的类型声明”的错误。
这是我添加的内容：
vue.config.js
2
1555module.exports = {
chainWebpack: (config) =>
{
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule
.use('vue-loader-v16')
.loader('vue-loader-v16')
.end()
.use('vue-svg-loader')
.loader('vue-svg-loader');
},
configureWebpack: process.env.NODE_ENV === 'production' ? {} : {
devtool: 'source-map'
},
publicPath: process.env.NODE_ENV === 'production' ?
'/PersonalWebsite/' : '/'
}
shims-svg.d.ts
declare module '*.svg' {
const content: any;
export default content;
}
MyComponent.vue
<template>
<div>
<MyLogo />
</div>
</template>
<script lang="ts">
import * as MyLogo from "../../assets/myLogo.svg";
export default defineComponent({
name: "MyComponent",
components: {
MyLogo
},
props: {
},
setup(props)
{
return {
props
};
}
});
</script>
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
vue-svg-loader 不兼容 vue 3。要导入 svg 并将其用作组件，只需将文件内容包裹在 'template' 中
在组件中：
<template> <div class="title"> <span>Lorem ipsum</span> <Icon /> </div> </template> <script> import Icon from '~/common/icons/icon.svg'; export default { name: 'PageTitle', components: { Icon }, }; </script>Webpack：
{ test: /\.svg$/, use: ['vue-loader', path.resolve(__dirname, 'scripts/svg-to-vue.js')], }scripts/svg-to-vue.js：
module.exports = function (source) { return `<template>\n${source}\n</template>`; };