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)

}

相关推荐
GoldKey1 小时前
gcc 源码阅读---语法树
linux·前端·windows
Xf3n1an2 小时前
html语法
前端·html
张拭心2 小时前
亚马逊 AI IDE Kiro “狙击”Cursor?实测心得
前端·ai编程
漠月瑾-西安2 小时前
如何在 React + TypeScript 中实现 JSON 格式化功能
javascript·jst实现json格式化
烛阴2 小时前
为什么你的Python项目总是混乱?层级包构建全解析
前端·python
止观止3 小时前
React响应式组件范式:从类组件到Hooks
javascript·react.js·ecmascript
@大迁世界3 小时前
React 及其生态新闻 — 2025年6月
前端·javascript·react.js·前端框架·ecmascript
LJianK13 小时前
Java和JavaScript的&&和||
java·javascript·python
红尘散仙4 小时前
Rust 终端 UI 开发新玩法:用 Ratatui Kit 轻松打造高颜值 CLI
前端·后端·rust
mldong4 小时前
mldong-goframe:基于 GoFrame + Vben5 的全栈快速开发框架正式开源!
vue.js·后端·go