废话少说,说一说情况。我这几天在重新看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去帮你加载模块完成打包,其余的报错认真读报错信息解决就可以了。借鉴的文章结合自己的环境完成配置(文章链接),展示一下我的渲染结果。