<p>Ich habe Folgendes versucht: <br /> <a href="https://github.com/visualfanatic/vue-svg-loader/tree/master">https://github /visualfanatic/vue-svg-loader/tree/master</a></p> <p>Aber da in Vue 2 der Vue-Template-Compiler verwendet wird, gibt es einen Versionskonflikt. </p> <p>Ich habe versucht:<br /> <a href="https://github.com/visualfanatic/vue-svg-loader">https://github.com/visualfanatic/vue-svg -loader</a></p> <p>Aber mir fehlt eine bestimmte Vue-Abhängigkeit. </p> <p>Mir ist aufgefallen, dass es bei der Verwendung von TypeScript einen Hinweis gibt, der die Deklaration einer Typdefinitionsdatei erfordert. Ich erhalte jedoch immer noch die Fehlermeldung „Modul '../../assets/myLogo.svg' oder die entsprechende Typdeklaration kann nicht gefunden werden“. </p> <p>Das habe ich hinzugefügt: </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') .Ende() .use('vue-svg-loader') .loader('vue-svg-loader'); }, configureWebpack: Process.env.NODE_ENV === 'Produktion' {} : { devtool: 'source-map' }, publicPath: Process.env.NODE_ENV === 'Produktion'? '/Persönliche Webseite/' : '/' }</pre> <p>shims-svg.d.ts</p> <pre class="brush:php;toolbar:false;">modul '*.svg' deklarieren { const-Inhalt: beliebig; Standardinhalte exportieren; }</pre> <p>MyComponent.vue</p> <pre class="brush:php;toolbar:false;"><template> <div> <MeinLogo /> </div> </template> <script lang="ts"> import * als MyLogo aus „../../assets/myLogo.svg“; Standard exportieren defineComponent({ Name: „MyComponent“, Komponenten: { MeinLogo }, Requisiten: { }, Setup(Requisiten) { zurückkehren { Requisiten }; } }); </script></pre> <p><br /></p>

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

{
   test: /\.svg$/,
   use: ['vue-loader', path.resolve(__dirname, 'scripts/svg-to-vue.js')],
}

module.exports = function (source) {
  return `<template>\n${source}\n</template>`;
};

vue inspect --rules

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

declare module '*.svg' {
  // 它实际上是一个字符串，精确地说是指向图像文件的解析路径
  const filePath: string;

  export default filePath;
}