我尝试了以下操作:https : //github.com/visualfanatic/vue-svg-loader/tree/master
但是vue-template-compiler存在版本冲突,因为该版本已在Vue 2中使用。
我试过了:https : //github.com/visualfanatic/vue-svg-loader
但我缺少特定的vue依赖项。
我注意到使用typescript有一个警告,你需要声明类型定义文件。但是,我仍然收到“找不到模块'../../assets/myLogo.svg'或其对应的类型声明。”
这是我添加的内容:
vue.config.js
module.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>
实际上,Vue CLI开箱即用地支持SVG。它在内部使用文件加载器。你可以通过在终端上运行以下命令来确认它:
vue inspect --rules
如果列出了“ svg”(应该是),那么你要做的就是:
<template>
<div>
<img :src="myLogoSrc" alt="my-logo" />
</div>
</template>
<script lang="ts">
// Please just use `@` to refer to the root "src" directory of the project
import myLogoSrc from "@/assets/myLogo.svg";
export default defineComponent({
name: "MyComponent",
setup() {
return {
myLogoSrc
};
}
});
</script>
因此,不需要任何第三方库-也就是说,你的纯粹目的只是显示SVG。
当然,要满足TypeScript编译器对类型声明的要求,请执行以下操作:
declare module '*.svg' {
// It's really a string, precisely a resolved path pointing to the image file
const filePath: string;
export default filePath;
}