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的引入文件的路径也可以。

 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！