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)

}

相关推荐
Hello--_--World4 分钟前
React:useState 函数式更新、useContext 全解析、useReducer 深度解析
前端·react.js·前端框架
李白的天不白6 分钟前
vue优化建议
前端·javascript·vue.js
前端老石人9 分钟前
Chrome DevTools 调试入门:从零开始排查 CSS 问题
前端·css·chrome devtools
恋猫de小郭12 分钟前
经典,Flutter iOS 又修复了一个构建问题,还是很抽象
android·前端·flutter
invicinble17 分钟前
前端框架使用vue-cli(总篇章介绍)
前端·vue.js·前端框架
QD_ANJING21 分钟前
普及一下五月AI前端面试需要达到的强度....
前端·javascript·vue.js·人工智能·面试·职场和发展
AI自动化工坊21 分钟前
Chrome DevTools MCP:让AI编码代理获得浏览器调试能力
前端·人工智能·chrome devtools
ZC跨境爬虫23 分钟前
跟着 MDN 学 HTML day_26:(DOM 的树形结构与节点导航)
前端·ui·html·音视频·视频编解码
2601_9534656131 分钟前
纯前端高性能!m3u8live.cn 重新定义 M3U8 在线播放与调试体验
开发语言·前端·javascript·m3u8