Vue 3 に svg ファイルをインポートするにはどうすればよいですか?
<p>次のことを試しました: <br /> <a href="https://github.com/visualfanatic/vue-svg-loader/tree/master">https://github.com /visualfanatic/vue-svg-loader/tree/master</a></p>
<p>しかし、vue-template-compiler は Vue 2 で使用されているため、バージョンの競合が発生します。 </p>
<p>試してみました:<br /> <a href="https://github.com/visualfanatic/vue-svg-loader">https://github.com/visualfanatic/vue-svg -loader</a></p>
<p>しかし、特定の Vue 依存関係がありません。 </p>
<p>TypeScript を使用する場合、型定義ファイルを宣言する必要があるという注意事項があることに気付きました。ただし、依然として「モジュール '../../assets/myLogo.svg' またはそれに対応する型宣言が見つかりません」というエラーが表示されます。 </p>
<p>これは私が追加したものです: </p>
<p>vue.config.js</p>
<pre class="brush:php;toolbar:false;">module.exports = {
chainWebpack: (config) =>
{
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgルール
.use('vue-loader-v16')
.loader('vue-loader-v16')
。終わり()
.use('vue-svg-loader')
.loader('vue-svg-loader');
}、
configureWebpack: process.env.NODE_ENV === 'production' ? {} : {
開発ツール: 'ソースマップ'
}、
publicPath: process.env.NODE_ENV === 'production' ?
'/パーソナルウェブサイト/' : '/'
}</pre>
<p>shims-svg.d.ts</p>
<pre class="brush:php;toolbar:false;">モジュール '*.svg' を宣言 {
定数の内容: 任意;
デフォルトのコンテンツをエクスポートします。
}</pre>
<p>MyComponent.vue</p>
<pre class="brush:php;toolbar:false;"><テンプレート>
<div>
<マイロゴ />
</div>
</テンプレート>
<script lang="ts">
import * as MyLogo from "../../assets/myLogo.svg";
デフォルトのエクスポートdefineComponent({
名前: "MyComponent"、
コンポーネント: {
マイロゴ
}、
小道具: {
}、
セットアップ(小道具)
{
戻る {
小道具
};
}
});
</script></pre>
<p><br /></p>