Saya mencuba yang berikut:
https://github com /visualfanatic/vue-svg-loader/tree/master
Tetapi kerana vue-template-compiler digunakan dalam Vue 2, terdapat konflik versi.
Saya mencuba:
https://github.com/visualfanatic/vue- svg -pemuat
Tetapi saya kehilangan pergantungan Vue tertentu.
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".
Ini yang saya tambahkan:
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 === 'pengeluaran' {} : { devtool: 'sumber-peta' }, publicPath: process.env.NODE_ENV === 'pengeluaran' ? '/Tapak Web Peribadi/' : '/' } shims-svg.d.ts
deklarasikan modul '*.svg' { kandungan const: mana-mana; eksport kandungan lalai; } MyComponent.vue
import * sebagai MyLogo daripada "../../assets/myLogo.svg"; eksport lalai defineComponent({ nama: "MyComponent", komponen: { MyLogo }, alat peraga: { }, persediaan (props) { kembali { alat peraga }; } });
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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:
{ test: /\.svg$/, use: ['vue-loader', path.resolve(__dirname, 'scripts/svg-to-vue.js')], }scripts/svg-to-vue.js:
module.exports = function (source) { return `\n${source}\n`; };Malah, Vue CLI sudah pun menyokong SVG secara asli. Ia menggunakanpemuat failsecara 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:
declare module '*.svg' { // 它实际上是一个字符串，精确地说是指向图像文件的解析路径 const filePath: string; export default filePath; }