Warm tip: This article is reproduced from serverfault.com, please click

javascript-如何在Vue 3中导入svg?

(javascript - How do I import an svg in Vue 3?)

发布于 2020-12-01 23:51:32

我尝试了以下操作:https : //github.com/visualfanatic/vue-svg-loader/tree/master

但是vue-template-compiler存在版本冲突,因为该版本已在Vue 2中使用。

我试过了:https : //github.com/visualfanatic/vue-svg-loader

但我缺少特定的vue依赖项。

我注意到使用typescript有一个警告,你需要声明类型定义文件。但是,我仍然收到“找不到模块'../../assets/myLogo.svg'或其对应的类型声明。”

这是我添加的内容:

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 === 'production' ? {} : {
    devtool: 'source-map'
  },
  publicPath: process.env.NODE_ENV === 'production' ?
    '/PersonalWebsite/' : '/'
}

shims-svg.d.ts

declare module '*.svg' {
  const content: any;
  export default content;
}

MyComponent.vue

<template>
  <div>
     <MyLogo />
  </div>
</template>

<script lang="ts">
import * as MyLogo from "../../assets/myLogo.svg";

export default defineComponent({
  name: "MyComponent",
  components: {
    MyLogo
  },
  props: {
    
  },
  setup(props)
  {
    return {
      props
    };
  }
});


</script>
Questioner
avenmia
Viewed
0
Yom T. 2020-12-03 02:39:44

实际上,Vue CLI开箱即用地支持SVG。它在内部使用文件加载器你可以通过在终端上运行以下命令来确认它:

vue inspect --rules

如果列出了“ svg”(应该是),那么你要做的就是:

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

<script lang="ts">
  // Please just use `@` to refer to the root "src" directory of the project
  import myLogoSrc from "@/assets/myLogo.svg";

  export default defineComponent({
    name: "MyComponent",

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

因此,不需要任何第三方库-也就是说,你的纯粹目的只是显示SVG。

当然,要满足TypeScript编译器对类型声明的要求,请执行以下操作:

declare module '*.svg' {
  // It's really a string, precisely a resolved path pointing to the image file
  const filePath: string;

  export default filePath;
}