vue 外部字體圖標使用，無須絕對路徑引入辦法

通常外部字體圖標都在使用 iconfont ，這種圖標在網上搜到一大把都是由於路徑問題顯示不出來，或者是顯示個方塊。

最近的項目中也碰到這個坑爸的問題，總結一下解決辦法：

1. 和 webpack.config 配置沒有多大關系，按照 vue-cli 生成的  webpack.base.conf.js 這個文件不需要改動，保持原來就好
2. 將 icon 文件與 icon 樣式文件 置於同一目錄下放在 assets 目錄下即可
3. 在 main.js 中 通過 import 引入，路徑以 ./assets/ 為開始

• 置於同一目錄下放在 assets 目錄下

@font-face {
  font-family: 'icon';
  src:  url('icon.eot?btu5gk');
  src:  url('icon.eot?btu5gk#iefix') format('embedded-opentype'),
    url('icon.ttf?btu5gk') format('truetype'),
    url('icon.woff?btu5gk') format('woff'),
    url('icon.svg?btu5gk#icon') format('svg');
  font-weight: normal;
  font-style: normal;
}

•  main.js 中 通過 import 引入

import './assets/fonts/fonts.css'

 

最終顯示效果為：