Vue 3中如何导入svg文件？-PHP中文网问答

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

但是由于Vue 2中使用了vue-template-compiler，所以存在版本冲突。

我尝试了：
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>

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

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

全部回复(2)

P粉6765887382023-08-24 00:48:35 2楼

vue-svg-loader 不兼容 vue 3。要导入 svg 并将其用作组件，只需将文件内容包裹在 'template' 中

在组件中：

Webpack：

{
   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>`;
};

赞 +0

添加回复

P粉5879700212023-08-24 00:34:09 1楼

实际上，Vue CLI已经原生支持SVG。它内部使用file-loader。您可以通过在终端上运行以下命令来确认：

vue inspect --rules

如果“svg”被列出（应该会被列出），那么您只需要：

因此，如果您的目的只是显示SVG，那么不需要任何第三方库。

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

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

  export default filePath;
}