如何在 Vue 3 中导入 svg？

Question

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

但与 vue-template-compiler 存在版本冲突，因为它在 Vue 2 中使用。

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

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

我注意到使用打字稿有一个警告，您需要声明类型定义文件。但是，我仍然得到“找不到模块 '../../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/' : '/'
}

垫片-svg.d.ts

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

我的组件.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>

Answer 1

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

\n

vue inspect --rules\n

\n

如果列出了“svg”（应该是），那么您所要做的就是：

\n

vue inspect --rules\n

\n

因此，如果您的纯粹目的只是显示 SVG，则不需要任何第三方库\xe2\x80\x94。

\n

当然，要满足 TypeScript 编译器对类型声明的要求：

\n

<template>\n  <div>\n    <img :src="myLogoSrc" alt="my-logo" />\n  </div>\n</template>\n\n<script lang="ts">\n  // Please just use `@` to refer to the root "src" directory of the project\n  import myLogoSrc from "@/assets/myLogo.svg";\n\n  export default defineComponent({\n    name: "MyComponent",\n\n    setup() {\n      return {\n        myLogoSrc\n      };\n    }\n  });\n</script>\n

\n