VUE打包图片，icon图标不显示解决方案

第一：使用element框架的icon时候，开发环境下是没有问题的，打包完以后出现小方块，页面不显示，解决办法：找到utils.js文件，如下图，

function generateLoaders (loader, loaderOptions) {const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]if (loader) {loaders.push({loader: loader + '-loader',options: Object.assign({}, loaderOptions, {sourceMap: options.sourceMap})})}// Extract CSS when that option is specified// (which is the case during production build)if (options.extract) {return ExtractTextPlugin.extract({use: loaders,fallback: 'vue-style-loader',publicPath: '../../',//解决ele小图标出不来问题})} else {return ['vue-style-loader'].concat(loaders)}}

第二：打包完以后路径不对了，加载文件，图片不出来

解决办法：找到config里面的index.js，加入assetsPublicPath: ‘./’,

build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: './', //解决打包完路径不对的问题

第三.调大

第四：阿里巴巴icon图标，加上HTTP

第五：data里写的图片路径，所以需要把路径换为 ‘./static/imgs/XXXX.png’

  data () {return {//审核状态state: '',roledata: [{name: '1', img: './static/imgs/XXX.png'},{name: '2', img: './static/imgs/XXX.png'},{name: '3', img: './static/imgs/XXX.png'},{name: '4', img: './static/imgs/XXX.png'},]}},

以后吧路径统一写成‘./static/imgs/XXXX.png’ 本地也能访问到，打包后就不会冲突

VUE打包图片，icon图标不显示解决方案相关推荐

vue打包之后浏览器图标设置直接没有输出，vue打包之后浏览器图标不显示
打包之前的部分index.html <!DOCTYPE html> <html lang="zh-CN"> <head><title> ...
vue项目 - svg格式的icon图标无法显示颜色
前言在项目中遇到svg格式的icon图标无法显示颜色,这个问题.尝试过很多方法,最后发现不是代码的问题,而是iconfont图标库中没有配置好. 1. 发现问题如下当点击菜单选项时,icon和文字 ...
elementPlus使用icon图标不显示解决方法
近期在学习Vue时用elementUI时发现icon在页面上显示不出来,根据官方文档上的用法都显示不出来,听说在文档更新后好像不可以直接使用,需要引用. 正常按照文档标签使用(icon图标未显示) & ...
解决网页ICON图标无法显示的问题
解决网页ICON图标无法显示的问题参考文章: (1)解决网页ICON图标无法显示的问题 (2)https://www.cnblogs.com/ziyoublog/p/10974406.html 备忘 ...
Vue本地图片循环加载显示不出来，vue img标签 :src地址拼接
Vue本地图片循环加载显示不出来,vue img标签 :src地址拼接上代码: <img:src="img"alt="banner" /> dat ...
Vue Element-UI使用icon图标(第三方)--在线版
Element-ui一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,在Vue中使用是很方便的. 关于引用icon(第三方),有一种不用下载项目到本地的方法, 前言 eleme ...
vue中引用tinymce图标不显示解决方法
vue中引用tinymce图标不显示解决方法通过官网查到一篇博客,按照上面步骤可以实现tinymce富文本编辑器的封装和使用. https://www.cnblogs.com/zhongchao66 ...
vant使用遇到icon图标不显示，显示为方块□□□□□
vant使用遇到icon图标不显示,显示为方块□□□□□ 现象搜索找到的方法最终找到原因: 最终现象现象 <van-icon name="chat-o" /> & ...
Android11 状态栏icon图标的显示流程
隐藏状态栏icon闹钟的显示设置闹钟后在状态栏ICON区域会显示一个闹钟小图标,我们实现设置闹钟后让它不显示. 参考博客:https://blog.csdn.net/weixin_33881140/ ...
vue 打包部署子目录后 elementUI icon 图标不显示
问题部署后element-icon 请求资源404 解决修改 vue.config.js (添加前缀路径) vue.config.js完整代码 'use strict' const path = ...

VUE打包图片，icon图标不显示解决方案

VUE打包图片，icon图标不显示解决方案相关推荐

最新文章

热门文章