Bagaimana untuk mengimport fail svg dalam Vue 3?
P粉021854777
2023-08-23 08:37:27
<p>Saya mencuba yang berikut: <br /><a href="https://github.com/visualfanatic/vue-svg-loader/tree/master">https://github com /visualfanatic/vue-svg-loader/tree/master</a></p>
<p>Tetapi kerana vue-template-compiler digunakan dalam Vue 2, terdapat konflik versi. </p>
<p>Saya mencuba:<br /> <a href="https://github.com/visualfanatic/vue-svg-loader">https://github.com/visualfanatic/vue- svg -pemuat</a></p>
<p>Tetapi saya kehilangan pergantungan Vue tertentu. </p>
<p>Saya perasan bahawa terdapat nota semasa menggunakan TypeScript, yang memerlukan pengisytiharan fail definisi jenis. Walau bagaimanapun, saya masih mendapat ralat "Tidak dapat mencari modul '../../assets/myLogo.svg' atau pengisytiharan jenis yang sepadan". </p>
<p>Ini yang saya tambahkan: </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();
svgRule
.use('vue-loader-v16')
.loader('vue-loader-v16')
.end()
.use('vue-svg-loader')
.loader('vue-svg-loader');
},
configureWebpack: process.env.NODE_ENV === 'pengeluaran' {} : {
devtool: 'sumber-peta'
},
publicPath: process.env.NODE_ENV === 'pengeluaran' ?
'/Tapak Web Peribadi/' : '/'
}</pre>
<p>shims-svg.d.ts</p>
<pre class="brush:php;toolbar:false;">deklarasikan modul '*.svg' {
kandungan const: mana-mana;
eksport kandungan lalai;
}</pre>
<p>MyComponent.vue</p>
<pre class="brush:php;toolbar:false;"><template>
<div>
<Logo Saya />
</div>
</template>
<skrip lang="ts">
import * sebagai MyLogo daripada "../../assets/myLogo.svg";
eksport lalai defineComponent({
nama: "MyComponent",
komponen: {
MyLogo
},
alat peraga: {
},
persediaan (props)
{
kembali {
alat peraga
};
}
});
</script></pre>
<p><br /></p>
vue-svg-loader tidak serasi dengan vue 3. Untuk mengimport svg dan menggunakannya sebagai komponen, hanya bungkus kandungan fail dalam 'template'
Dalam komponen:
Pek web:
scripts/svg-to-vue.js:
Malah, Vue CLI sudah pun menyokong SVG secara asli. Ia menggunakan pemuat fail secara dalaman. Anda boleh mengesahkan dengan menjalankan arahan berikut pada terminal:
Jika "svg" disenaraikan (sepatutnya), maka anda hanya perlu:
Jadi jika tujuan anda hanya untuk memaparkan SVG, anda tidak memerlukan perpustakaan pihak ketiga.
Sudah tentu, untuk memenuhi keperluan pengisytiharan jenis penyusun TypeScript: