hbuilderX打包vue项目白屏问题以及element-ui的icon图标无法正常显示问题

附录一:hbuilderX打包vue项目白屏问题

将项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的"/",改为"./"后,再打包生成的 dist 文件

build: {

// assetsPublicPath: '/',//修改前

assetsPublicPath: './',//修改后

}

附录二element-ui的icon图标无法正常显示问题:hbuilderX打包vue项目

问题:使用vue-cli3脚手架搭建的项目,在打包文件上服务器的时候,其他的css,js样式都能正确加载出路径,

但是element的icon图标却不能正常加载出来。

问题分析:

加载的路径https://yxq.linksign.cn/static/css/static/fonts/element-icons.535877f.woff

本应该加载的路径https://yxq.linksign.cn/static/fonts/element-icons.535877f.woff

打包的路径

事实上是打包时候读取的文件路径多了两层;

找到build文件的utils.js 中有打包的路径,看看generateLoaders();

Extract CSS when that option is specified, 指定该选项时提取CSS

发现少了个公共路径,加上pubilcPath

if (options.extract) {

return ExtractTextPlugin.extract({

use: loaders,

fallback: 'vue-style-loader',

// 解决icon路径加载错误

publicPath:'../../'

})

} else {

return 'vue-style-loader'.concat(loaders)

}

相关推荐
布鲁飞丝25 分钟前
从零实现富文本编辑器#-浏览器选区与编辑器选区模型同步
java·前端·编辑器
写不来代码的草莓熊34 分钟前
Cesium 地图交互绘制圆形、多边形
前端·javascript·地图
weixin_4277716143 分钟前
前端版本检测
前端
禅思院1 小时前
流式 Markdown 渲染完全指南【引子】
前端·架构·前端框架
JackSparrow4141 小时前
前端安全之JS混淆+请求加密+请求签名以提升爬虫难度
前端·javascript·后端·爬虫·python·安全
IMPYLH2 小时前
HTML 的 <em> 元素
java·前端·html
看昭奚恤哭2 小时前
基于 RuoYi-Vue-Pro 定制了一个后台管理系统 magic-admin , 开源出来!
前端·vue.js·开源
名为沙丁鱼的猫7294 小时前
【审计日志组件实践复盘】前端工程化 + 后端DDD架构(AOP切面拦截日志) + MBG
前端·架构
xqqxqxxq4 小时前
AI智能旅游规划系统 - 前端技术笔记
前端·笔记·旅游
陈随易10 小时前
bm2,MoonBit实现的pm2替代品
前端·后端·程序员