vue-cli+iview项目打包上线之后图标不显示问题及解决方法
更新时间：2019年10月16日 13:27:46 作者：Linhoonyu的网络笔记
这篇文章主要介绍了解决vue-cli+iview项目打包上线之后图标不显示问题,本文通过两种方法给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
做vue项目使用的iviewUI库，打包上线之后发现icon都不显示，然后做了很多尝试，更改打包路径等，都没有太好的效果，最后还是在网上找到了方法：
1. 方法一：
在build/utils.js下面找到这段代码，将其中publicPath改成…/…/，保存并重新打包。注意：这个路径不是绝对的，根绝自己的目录结构来写
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../',
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
2. 方法二：
找到build/webpack.prod.conf.js文件中下面这段代码，将extract项改成false,保存并重新打包。
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: false,
usePostCSS: true
})
},
总结：我是通过第一种方法解决的，可以完美解决，这里建议两种都试一下，如果第二种方法能解决的话，使用第二种，因为第二种方法相对第一种更灵活。
总结
以上所述是小编给大家介绍的vue-cli+iview项目打包上线之后图标不显示问题及解决方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
在 Vue 3 中，父子组件之间进行通信有多种方式，下面简单介绍下常见的方式及其用法和使用场景，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2024-01-01
这篇文章主要为大家详细介绍了vue实现旋转木马动画，图片数量无限制，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
最近在做uni-app的时候需要用到vant组件，在网上看到了很多的使用vant组件的方法，但是讲解的大多繁琐，或者无法使用，现把最新，最实用的vant组件的使用方法分享给大家,需要的朋友可以参考下2023-02-02
Vue过滤器,生命周期函数和vue-resource简单介绍
这篇文章主要介绍了Vue过滤器,生命周期函数和vue-resource简单介绍，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2021-01-01
这篇文章主要介绍了Vue.js中使用Vuex实现组件数据共享案例,具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
本篇文章主要介绍了VUE使用vuex解决模块间传值问题 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要为大家详细介绍了Vue标尺插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要给大家介绍了关于vue实现多条件筛选的相关资料,随着数据的不断增多,我们往往需要在表格中进行多条件的筛选,以便快速定位符合我们需求的数据,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue2实现封装动态表单组件，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
这篇文章主要为大家详细介绍了vue使用拖拽方式创建结构树，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
最新评论