如何在 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' 或其相应的类型声明”。

这是我添加的内容：

视图.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>

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。它在内部使用文件加载器。您可以通过在终端上运行以下命令来确认：vue inspect --rules如果列出了“svg”（应该是），那么您所要做的就是：<template>  <div>    <img :src="myLogoSrc" alt="my-logo" />  </div></template><script>  // 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;}

Answer 2

vue-svg-loader 与 vue 3 不兼容。要导入 svg 并将其用作组件，只需将文件内容包装在“template”中在组件中：<template>&nbsp; <div class="title">&nbsp; &nbsp; <span>Lorem ipsum</span>&nbsp; &nbsp; <Icon />&nbsp; </div></template><script>import Icon from '~/common/icons/icon.svg';export default {&nbsp; name: 'PageTitle',&nbsp; components: { Icon },};</script>网页包：{&nbsp; &nbsp;test: /\.svg$/,&nbsp; &nbsp;use: ['vue-loader', path.resolve(__dirname, 'scripts/svg-to-vue.js')],}脚本/svg-to-vue.js：module.exports = function (source) {&nbsp; return `<template>\n${source}\n</template>`;};

Answer 3

不能肯定地说，因为我还没有尝试过 ts，declare module '*.svg' {    import type { DefineComponent } from 'vue';    const component: DefineComponent;    export default component;}我看到你正在使用：import * as MyLogo from "../../assets/myLogo.svg";我认为应该是：import MyLogo from "../../assets/myLogo.svg";

Answer 4

全新安装的 vue.js 3.2 的示例：<img&nbsp;alt="Vue&nbsp;logo"&nbsp;class="logo"&nbsp;src="@/assets/logo.svg"&nbsp;width="125"&nbsp;height="125"/>