Bagaimana untuk mengimport fail svg dalam Vue 3?

Question

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

<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>

Answer 1

vue-svg-loader tidak serasi dengan vue 3. Untuk mengimport svg dan menggunakannya sebagai komponen, hanya bungkus kandungan fail dalam 'template'

Dalam komponen:

<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>

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 `<template>\n${source}\n</template>`;
};

Answer 2

Malah, Vue CLI sudah pun menyokong SVG secara asli. Ia menggunakan pemuat fail secara dalaman. Anda boleh mengesahkan dengan menjalankan arahan berikut pada terminal:

vue inspect --rules

Jika "svg" disenaraikan (sepatutnya), maka anda hanya perlu:

<template>
  <div>
    <img :src="myLogoSrc" alt="my-logo" />
  </div>
</template>

<script lang="ts">
  // 请使用`@`来引用项目的根目录“src”
  import myLogoSrc from "@/assets/myLogo.svg";

  export default defineComponent({
    name: "MyComponent",

    setup() {
      return {
        myLogoSrc
      };
    }
  });
</script>

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;
}