環(huán)境
框架：vue3
組件庫(kù)：ant-design-vue 3.x
iconfont平臺(tái)：https://www.iconfont.cn
在線項(xiàng)目管理項(xiàng)目圖標(biāo)庫(kù)
問題
一般我們會(huì)使用ant-design-vue給出的在線iconfont方案進(jìn)行圖標(biāo)管理，如下：
import { createFromIconfontCN } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
const MyIcon = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
});
export default defineComponent({
setup() {
return () => <MyIcon type="icon-dianzan" />;
},
});
具體參考：https://3x.antdv.com/components/icon-cn/#Icon
但這個(gè)方式一般用于開發(fā)環(huán)境南誊，當(dāng)項(xiàng)目上線火窒，如果部署在內(nèi)網(wǎng)或者iconfont.cn網(wǎng)站故障届垫，將導(dǎo)致項(xiàng)目icon不可用。
為了避免涣雕，我們一般將文件下載到本地項(xiàng)目中進(jìn)行打包使用艰亮。
網(wǎng)上對(duì)于這個(gè)問的解決方法，大多是下載iconfont文件到本地挣郭，然后將.css和.ttf文件引入項(xiàng)目迄埃。
那么如何繼續(xù)用iconfont.js這種和在線情況一樣的文件類型呢？
方法比較簡(jiǎn)單兑障，將js文件下載侄非，放置于public文件夾下，然后在vue項(xiàng)目的index.html的<head>中引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>xxxx</title>
<script src="/iconfont.js"></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
注意點(diǎn)
這樣引用必須將文件放置于public文件夾下流译，并且引入是src="/iconfont.js"逞怨，否則會(huì)造成在其它頁(yè)面找不到iconfont.js資源（404），導(dǎo)致圖標(biāo)不顯示福澡。
以上叠赦。
鑒于本人經(jīng)驗(yàn)有限，以上問題可能理解不到位或有錯(cuò)誤竞漾，如有發(fā)現(xiàn)請(qǐng)各位評(píng)論指正眯搭，避免誤導(dǎo)更多人。
