4 回答

TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超6個(gè)贊
實(shí)際上,Vue CLI 開箱即用地支持 SVG。它在內(nèi)部使用文件加載器。您可以通過(guò)在終端上運(yùn)行以下命令來(lái)確認(rèn):
vue?inspect?--rules
如果列出了“svg”(應(yīng)該是),那么您所要做的就是:
<template>
? <div>
? ? <img :src="myLogoSrc" alt="my-logo" />
? </div>
</template>
<script>
? // 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,則不需要任何第三方庫(kù)。
當(dāng)然,要滿足 TypeScript 編譯器對(duì)類型聲明的要求:
declare module '*.svg' {
? // It's really a string, precisely a resolved path pointing to the image file
? const filePath: string;
? export default filePath;
}

TA貢獻(xiàn)1891條經(jīng)驗(yàn) 獲得超3個(gè)贊
vue-svg-loader 與 vue 3 不兼容。要導(dǎo)入 svg 并將其用作組件,只需將文件內(nèi)容包裝在“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>
網(wǎng)頁(yè)包:
{
test: /\.svg$/,
use: ['vue-loader', path.resolve(__dirname, 'scripts/svg-to-vue.js')],
}
腳本/svg-to-vue.js:
module.exports = function (source) {
return `<template>\n${source}\n</template>`;
};

TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超9個(gè)贊
不能肯定地說(shuō),因?yàn)槲疫€沒有嘗試過(guò) ts,
declare module '*.svg' {
? ? import type { DefineComponent } from 'vue';
? ? const component: DefineComponent;
? ? export default component;
}
我看到你正在使用:
import * as MyLogo from "../../assets/myLogo.svg";
我認(rèn)為應(yīng)該是:
import MyLogo from "../../assets/myLogo.svg";

TA貢獻(xiàn)1874條經(jīng)驗(yàn) 獲得超12個(gè)贊
全新安裝的 vue.js 3.2 的示例:
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125"/>
添加回答
舉報(bào)