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)

}

相关推荐
i_am_a_div_日积月累_4 分钟前
Element Plus 取消el-form-item点击触发组件,改为原生表单控件
前端·vue.js·elementui
集成显卡8 分钟前
网页 H5 微应用接入钉钉自动登录
前端·后端·钉钉
paintstar10 分钟前
el-scrollbar 获取滚动条高度 并将滚动条保持在低端
前端·学习·vue·css3
天天进步20151 小时前
前端测试策略:单元测试到 E2E 测试
前端·单元测试
多啦爱梦的梦想2 小时前
项目中把webpack 打包改为vite 打包
前端·webpack
小刘不知道叫啥2 小时前
简单说一下 Webpack分包
前端·javascript·webpack·node.js
Dontla2 小时前
《黑马前端ajax+node.js+webpack+git教程》(笔记)——node.js教程+webpack教程(nodejs教程)
前端·ajax·node.js
MessiGo2 小时前
Javascript 编程基础(2)基础知识 | 2.1、javascript与Node.js
开发语言·javascript·node.js
繁依Fanyi2 小时前
项目记录:「五秒反应挑战」小游戏的开发全过程
前端·codebuddy首席试玩官
肥肠可耐的西西公主3 小时前
前端(vue)学习笔记(CLASS 6):路由进阶
前端·vue.js·学习