vue项目中使用svg

背景

一般html中使用svg图片是用img标签使用，这在项目中就相对来说非常麻烦。出现大量使用svg情况就变的比较麻烦

<img src="../assets/svgs/car.svg" />

封装

将svg文件统一放一个文件夹下 src/assets/svgs

需要2步

为文件打包

安装开发依赖

npm i svg-sprite-loader -D

打包配置

....
chainWebpack: config => {
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/svgs'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/svgs'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  },
....

或

...
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    // 添加要替换的 loader
    svgRule.use('svg-sprite-loader')
           .loader('svg-sprite-loader')
           .options({symbolId: 'icon-[name]'})
  }
  })
  ...

为开发

封装VSvg.vue

util.js

export function isExternal (path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

export function importAll (requireContext) {
  requireContext.keys().forEach(requireContext)
}

关于require.context方法

核心就是使用了webpack内置的require.context方法
详细参数解释点击这里官网传送门

require.context(
  directory, //这里指存放svg文件目录的路径
  (useSubdirectories = true), //是否还搜索其子目录,默认为true
  (regExp = /^\.\/.*$/), //正则匹配文件类型， 这里我们匹配 .svg 结尾的文件 /\.svg$/
  (mode = 'sync') //模式，默认同步
);

main中注册

import VSvg from  '@/components/base/VSvg.vue'
import Vue from 'vue'
 Vue.component('v-svg', VSvg)

由于此处我注册的组件较多，而且都在一个文件里面

const registerGlobal = (Vue) => {
  const requireComponent = require.context(
    '@/components/base', true, /\.vue$/
  )
  console.log('学习', requireComponent)
  requireComponent.keys().forEach(fileName => {
    const componentConfig = requireComponent(fileName)
    const Component = componentConfig.default || componentConfig
    const componentName = kebabCase(fileName.replace(/^\.\//, '').replace(/\.\w+$/, ''))
    if (typeof Component.install === 'function') {
      Vue.use(Component)
    } else {
      Vue.component(componentName, Component)
    }
  })

  Vue.directive('perm', hasPerm)

  Vue.filter('dayjs', (val, formatter = 'YYYY-MM-DD HH:MM:ss') => dayjs(val).format(formatter))
}

组件使用