vue引入font awesome 及webpack打包後圖示不顯示的問題

vue引入font awesome的方法：

        npm install font-awesome --save

        然後在main.js 中：import 'font-awesome/css/font-awesome.css'

問題描述：打包後發現圖示不顯示 報錯為font awesome的相關檔案引用路徑問題；這是由于打包的配置檔案webpack conf.base.js中，字型打包的大小配置太小了，沒有打包到font awesome

本來的配置：

{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,          
        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
}
           

修改後：==>> 或者直接去除options配置也行（不推薦）

{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        // limit: 10000,   
        limit: 100000,       
        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
}
           

解決方法分析：

        limit的大小設定太小， 修改limit的大小為至少比font awesome的檔案大，然後即可；

        或者修改打包後的app .css中有關font awesome的引入檔案的路徑也可以。

文章僅為本人學習過程的一個記錄，僅供參考，如有問題，歡迎指出！