Bagaimana untuk mengimport fail svg dalam Vue 3?
P粉021854777
P粉021854777 2023-08-23 08:37:27
0
2
761
<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>
P粉021854777
P粉021854777

membalas semua(2)
P粉676588738

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>`;
};
P粉587970021

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;
}
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan