赞同 0
分享

Vue我终于能使用SVG图像了。。。

简介:我真是干啥啥不行,编译报错第一名!我前阵子压力实在是太大了,我就是学个Vue,我没想到一编译就报错一编译就报错,我也是不知道是为什么啊!杨超越哭~~respect【手动致敬】
  2020.07.11
  Bug Man
  0
  90
  172.17.0.1
  中国.上海
 
 

废话少说,说一说情况。我这几天在重新看Vue,然后我拉个后台的项目想改一改,结果遇到SVG使用loader加载器报错有点自闭。本来就是下班时间看看的,时间本来就不多,遇到这种搞心态的配置也是没谁了,简单记录一下配置的过程。

本机配置:

脚手架:npm ls -g vue @vue/cli@4.4.6

node:node -v v14.4.0

项目结构: 项目结构

1.安装加载器vue add svg-sprite-loader -D

2.配置vue.config.js,除了resolve中的路径其余配置的基本不用修改。

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  lintOnSave: false,
  transpileDependencies: ["vuetify"],
  chainWebpack(config) {
    // set svg-sprite-loader
    // 第一步:让其他svg loader不要对src/assets/imgs/svgs进行操作
    config.module
      .rule("svg")
      .exclude.add(resolve("src/assets/imgs/svgs"))
      .end();
    // 第二步:使用svg-sprite-loader 对 src/assets/imgs/svgs下的svg进行操作
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/assets/imgs/svgs"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      //定义规则 使用时 <svg class="icon"> <use xlink:href="#icon-svg文件名"></use>  </svg>
      .options({
        symbolId: "icon-[name]"
      })
      .end();
  }
};

3.在src下创建icon目录,icon目录下创建svgs放置svg文件。在components创建Icon.vue组件用来渲染svg标签,icon目录下创建index.js来注册组件和加载模块上下文(文章链接)

<!-- @components/Icon.vue -->
<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: "svg-icon",
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ""
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    },
    svgClass() {
      if (this.className) {
        return "svg-icon" + this.className;
      } else {
        return "svg-icon";
      }
    }
  }
};
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
// @icon/index.js

// 默认导入所有src文件夹下的icons文件(自动导入,不需手动一个个导入)
import Vue from "vue";
import SvgIcon from "@/components/Icon";//写了组件在打开 用于注册组件

Vue.component("svg-icon", SvgIcon);//写了组件在打开 用于注册组件

const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context("./svgs", false, /.svg$/);
requireAll(req);

4.上面的两个文件内容写入之后,在@main.js也就是src下的那个文件中导入icon下的js注册结果import './icon'即可。然后在需要渲染的页面中去渲染svg图像,比如我在App.vue中去渲染我的password.svg这个图像,那我就在模板中写入<svg-icon icon-class="password"></svg-icon>就可以完成渲染。最重要的是vue.config.js中的配置让webpack去帮你加载模块完成打包,其余的报错认真读报错信息解决就可以了。借鉴的文章结合自己的环境完成配置(文章链接),展示一下我的渲染结果。 渲染结果