vue-cli的webpack打包,icon无法正确加载

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-cli的webpack打包,icon无法正确加载相关的知识,希望对你有一定的参考价值。

今天vue-cli打包完发现加载不出font awesome;路经和奇怪,js,css,img都正确加载;

首先正确加载静态资源需要将config中的index.js中publicPath:‘./‘;

而font awesome的坑再于webpack对文件打包大小有限制(此处怪我没有好好学webpack);

而我发现我的font文件打包后竟有400k!!!!!

需要修改webpack.bace.conf.js中代码

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

bingo!!!

以上是关于vue-cli的webpack打包,icon无法正确加载的主要内容,如果未能解决你的问题,请参考以下文章

webpack+vue-cli项目打包技巧

vue-cli@webpack@4打包分析命令

vue-cli webpack3扩展多模块打包

搭建vue-cli项目和打包项目

webpack vue-cli2 配置打包测试环境

从 vue-cli 到 webpack多入口打包