不使用 vue-svg-loader 从本地目录导入 svg 文件

Question

我只是想知道是否可以将本地文件夹中的 svg 文件导入“.vue”文件。

--home directory
  --> page.vue
  --> svg-directory
      --> svgFile.svg

我想在 page.vue 中导入 svgFile.svg，执行如下操作：

import ....

或：

<img src="./svg-directory/svgFile.svg" /> 

或者别的什么。

感谢您的帮助

Answer 1

Vue 使用 webpack 作为资产捆绑器。

Webpack 需要一个加载器来处理它处理的每一种文件类型。值得庆幸的是，您不需要编写每个加载程序，因为它们已针对最常见的类型进行了预配置。但是，.svg 不是预配置的之一。

如果你想在 webpack 中加载 .svgs，你必须教 webpack 如何处理这些文件，这正是 vue-svg-loader 或 svgo-loader 所做的。
显然，您不必使用它们。您始终可以编写自己的加载程序。

如果您不想编写任何加载程序，您可以利用 vue-loader，它已经存在于 vue 应用程序中。只需将您的<svg> 包装在<template> 标记中并将其保存为.vue：

<template>
  <svg>...</svg>
</template>

现在您可以像使用任何其他组件一样导入和使用它。

这还带来了 <svg> 内联的优点，这意味着它可以继承 currentColor，因此您可以轻松地为其颜色设置动画（当它作为 <img> 加载时您不能这样做）。

在这里查看它的工作原理：https://codesandbox.io/s/hopeful-lamarr-qjvkm?file=/src/App.vue

---

如果你想自动化它并且不必将所有 svgs 包装在 <template> 标签中并将它们保存为 .vue，这里有一篇文章解释了如何做到这一点： https://codeburst.io/managing-svg-images-in-vue-js-applications-88a0570d8e88 使用这个加载器：

import Vue from 'vue';
const requireTemplate = require.context( '.?vue-template', false, /\.svg$/ );
context.keys().forEach( fileName => {
  const name = 'Svg' + fileName.replace( /^\.\//, '' )
    .replace( /\.svg$/, '' ) );
  const withRender = requireTemplate( fileName );
  const component = withRender( {} );
  Vue.component( name, component );
});

现在您可以像导入 .vue 组件并将其用作组件一样导入任何 .svg。