vue.config.js 添加如下配置
1.svg需要使用新的loader npm install svg-sprite-loader --S
2, 在chainWebpack 中设置匹配规则 让原有的svgloader 不去匹配自己添加的svg 所以使用 .exclude.add（‘资源路径’）将存放svg资源的文件路径过滤掉
3. 添加新安装的loader 路径匹配 使用.include.add(‘资源路径’) 让loader去解析存放svg资源的文件
4. symbolId 个人理解指的是 svg id 的 命名格式
icon-svg.vue 内容如下
<div class="Highlighter"> <pre class="brush:javascript;gutter:true;"><template>; <svg class="svg-icon" aria-hidden="true">; <use :xlink:href="iconName">;</use>; </svg>; </template>; <script>; export default { name: ‘icon-svg‘, props: { iconClass: { type: String, required: true } }, computed: { iconName() { console.log(`#icon-${this.iconClass}`) return `#icon-${this.iconClass}` // 与配置文件的配置格式一致 } } } </script>; <style>; .svg-icon { width: 20px; height: 20px; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>; </pre> </div>
最重要的是里面的index.js文件
import Vue from ‘vue‘ import IconSvg from ‘@/components/svgIcon/icon-svg‘ //全局注册icon-svg Vue.component(‘icon-svg‘, IconSvg) const requireAll = requireContext => requireContext.keys().map(requireContext) const req = require.context(‘./svg‘, false, /\.svg$/) requireAll(req)/* */
require.context：require.context有三个参数：
参考网址：https://www.cnblogs.com/ccyinghua/p/10232481.html
原文：https://www.cnblogs.com/xy1996/p/12145296.html