Hai, saya menghadapi masalah mengimport svg sebaris ke dalam projek nuxt3 vite saya. Sebarang nasihat akan sangat dihargai.
Saya dapati ini yang berfungsi
setup(props) { const currentIcon = computed(() => { return defineAsyncComponent(() => import(`~/assets/images/icons/push-icon-chatops.svg'?inline`) ); }).value; return { currentIcon, }; },
Tetapi saya mendapati bahawa cara vite diimport adalah pelik, hasilnya sama ada rentetan url yang dipaparkan dalam v-html, atau objek tidak boleh dibaca
Saya cuba menggunakan pemalam ini tetapi tidak berjaya.
https://github.com/nuxt-community/svg-module
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Untuk projek TS Nuxt 3, keadaannya adalah seperti berikut.
nuxt.config.tsFail:import svgLoader from 'vite-svg-loader' export default defineNuxtConfig({ // Rest of your config. vite: { plugins: [ svgLoader({ // Your settings. }), ], }, })Contoh komponen:
Adalah penting untuk ambil perhatian yang terakhir
?component, jika tidak TS akan melaporkan ralat.Dokumentasi plug-in:vite-svg-loader
Nampaknya vite sebenarnya tidak serasi dengan
@nuxtjs/svgplugin. Jadi jawapannya ialah memasang pemalam khusus vite, dalam kes ini saya memasang pemalamvitedan kemudian melakukan inivite: { plugins: [ svgLoader() ] },