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)

}

相关推荐
墨绿色的摆渡人7 分钟前
论文笔记(七十五)Auto-Encoding Variational Bayes
前端·论文阅读·chrome
今晚吃什么呢?28 分钟前
前端面试题之CSS中的box属性
前端·css
我是大龄程序员30 分钟前
Babel工作理解
前端
《独白》41 分钟前
将图表和表格导出为PDF的功能
javascript·vue.js·ecmascript
CopyLower44 分钟前
提升 Web 性能:使用响应式图片优化体验
前端
南通DXZ1 小时前
Win7下安装高版本node.js 16.3.0 以及webpack插件的构建
前端·webpack·node.js
什码情况1 小时前
微服务集成测试 -华为OD机试真题(A卷、JavaScript)
javascript·数据结构·算法·华为od·机试
你的人类朋友1 小时前
浅谈Object.prototype.hasOwnProperty.call(a, b)
javascript·后端·node.js
Mintopia1 小时前
深入理解 Three.js 中的 Mesh:构建 3D 世界的基石
前端·javascript·three.js
打瞌睡de喵2 小时前
JavaScript 空对象检测
javascript