vue 动态加载阿里云字体图标库

在vue中动态加载阿里云字体图标库，就不会影响项目之前的图标，直接把自己需要的图标另外添加进去

1、在配置文件中定义引入图标路径地址，暴露出去，并在 main.js 中引入

iconfontUrl 定义的是引入字体图标地址

icongontVersion 定义的是引入地址里面的 $key，随着key的变化引入不同的图标，这个数组中的值就是图标在线链接这块

// 配置编译环境和线上环境之间的切换

const env = process.env
const baseUrl = ''
// //at.alicdn.com/t///at.alicdn.com/t/font_.css 左边是avue 右边是ris-ui font_
const iconfontVersion = ['2455399_kmxys0r1p09', '2454679_joj7678f15f']
const iconfontUrl = '//at.alicdn.com/t/font_$key.css'
const codeUrl = `${window.location.origin}/code`
const actUrl = `${window.location.origin}/act/modeler.html?modelId=`
if (env.NODE_ENV === 'development') {

} else if (env.NODE_ENV === 'production') {

} else if (env.NODE_ENV === 'test') {
}
export {
  baseUrl,
  actUrl,
  iconfontUrl,
  iconfontVersion,
  codeUrl,
  env
}

2、在 main.js 中动态加载阿里云字体库

// 引入的方法内容./util/util
/**
 * 动态插入css
 */

export const loadStyle = url => {
  const link = document.createElement('link')
  link.type = 'text/css'
  link.rel = 'stylesheet'
  link.href = url
  const head = document.getElementsByTagName('head')[0]
  head.appendChild(link)
}

main.js的内容

import { loadStyle } from './util/util'
import { iconfontUrl, iconfontVersion } from '@/config/env'
// 动态加载阿里云字体库
iconfontVersion.forEach(ele => {
  loadStyle(iconfontUrl.replace('$key', ele))
})