VUE发布应用部署子应用时，首次加载失败解决办法

最新推荐文章于 2025-02-20 15:59:46 发布
原创 最新推荐文章于 2025-02-20 15:59:46 发布 · 591 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript

本文详细阐述了Vue前端部署中遇到的图片字体404问题，通过调整build–utils.js和config–index.js配置，以及优化base64加载限制和webpack.base.conf.js，提升首加载体验。同时，针对大文件处理给出了实用建议。

vue发布前端部署包时，会出现子应用首次加载，图片字体等加载失败404的情况，这与打包配置有密切关系：如图配置解决90%
build–utils.js
在这里插入图片描述
config–index.js
在这里插入图片描述
还有，就是图片等静态文件超过10KB时，需修改base64加载文件大小限制(不易修改过大，影响网站加载速度，图片过大建议修改图片尺寸)
build–webpack.base.conf.js
在这里插入图片描述

Vue项目+ 打包解决静态资源无法加载和路由加载无效(404)问题
蓝胖子的博客
04-03 2637
Vue项目+ 打包解决静态资源无法加载和路由加载无效(404)问题
Vue 如何处理异步组件加载错误
前端开发博客
05-27 1407
大家好，我是宝哥。本周我会分享下面一系列的Vue教程，欢迎关注我。Vue 如何处理异步组件加载错误（当前）Vue、Nuxt 和 Vite 技巧、窍门和实践的集合我是如何发现没有在 Vue SPA 中将 EventListeners 放在挂载上的开源 Vueform 中的新 phone 元素Vue DevTools Next v7.2 发布尤大谈 Vite & Vue 2024 状态在工作了...
vue 公共头部初次加载数据失败
sky_sunshine_x的博客
09-03 443
<!--顶部--> <topHead v-if="getInfoTrue"></topHead> data() { return { getInfoTrue:false,//默认不加载子组件 } } getBannerList(){ getHone().then(response => { var _this=this; _this.getInfo...
Qiankun 踩坑集合
qq_38648558的博客
02-27 2405
Qiankun使用的时候的可能遇到的问题。
vue 页面图片需要刷新一次才能显示出来
07-27 5085
问题的描述：vue 页面图片第一次进入的时候不出来，需要刷新一次才能显示出来， 问题的原因：请检查进入的页面样式是否冲突。
微服务项目启动，子服务页面加载不出来？
qq_46940100的博客
10-14 554
主应用前端启动，子应用前端也启动了，但是在主应用无法查看子应用的页面
Vue项目部署在Spring Boot出现页面空白问题的解决方案
12-02
在开发Vue应用并将其部署到Spring Boot环境中时，可能会遇到页面加载空白的问题。这通常是由于文件路径配置不正确，导致CSS、JavaScript等静态资源无法被正确加载。在本篇文章中，我们将深入探讨这个问题，并提供一...
Vue+Electron打包桌面应用(从零到一完整教程)
weixin_68658847的博客
07-15 3804
Vue+Electron打包桌面应用(从零到一完整教程)
Vue+Electron打包桌面应用(从零到一完整教程)_vue打包桌面应用
2401_85124821的博客
05-27 1349
electron:serve”: “concurrently -k “npm run dev” “npm run electron”” //新增更新2。“appId”: “com.dweb.demo”, //包id com.dweb.项目名。“appId”: “com.dweb.demo”, //包id com.dweb.项目名。“appId”: “com.dweb.demo”, //包id com.dweb.项目名。// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。
Vue3项目部署后接口请求优化：打造快速响应Web应用的秘籍
[Vue3项目部署后接口请求优化：打造快速响应Web应用的秘籍](https://www.nicelydev.com/img/nginx/serveur-gzip-client.webp) # 摘要 本文针对Vue3项目接口请求及前端性能优化进行了全面的研究和实践。首先概述了...
Window下，运行vue（输入命令）遇到无法加载文件的问题
毛毛的博客
10-11 335
在创建vue项目的时候遇到无法加载文件的情况 在运行npm命令时候无法加载文件的情况
关于创建和挂载根实例失败无法在html页面加载App.vue问题
qq_29109193的博客
05-08 4056
   今天我要说一下我在学vuejs遇到的神坑，这个问题让我抓狂了一晚上，就是根据官方的文档来写页面不报错，终端也不不报错，就是无法在页面显示我在app.vue写的html代码，我找了一晚上的资料，发现在启动路由这里没有加载到app.vue页面的代码，后来我在里面加上render: h =&gt; h(App)这句就成功了，下面附上启动路由的完整代码，希望各位不要在遇到这种令人吐血的问题了：con...
vue项目中使用jquery，全局引入不生效
weixin_41506373的博客
05-11 1922
按照网上的方法在webpack.base.config.js中配置全局引入jquery一直不生效 // 增加一个plugins plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ], 网上的教程也没有说明为什么会这样，后来发现重新npm run dev，重新启动项目才会生效。 ...
处理vue自动打开浏览器，显示0.0.0.0失败，手动输入可以正常打开的问题
m0_46301172的博客
03-16 3473
引用 项目根目录创建一个 vue.config.js 文件，代码如下： module.exports = { devServer: { port: 80, host: '0.0.0.0', }, }; 执行serve运行命令，再次测试： 你的本机ip和localhost都可以访问成功
微前端qiankun事务引发的问题
petertanjinjie的博客
11-21 769
背景近期客户发现一个问题，说我们系统打不开了。但是只有这个客户发现了这个问题，刚好今天周一于是决定处理这个问题，影响太大了，用户一个办公室都打不开我们系统刚好一线妹子特别着急，人好像漂亮声音又好听，电话叫我一直别挂。我就决定认真处理这个问题排查通过远程访问用户电脑，实际操作打开我们系统发现不可用。qiankun微前端子应用加载失败，但是在我们电脑上、网络环境均可访问发现问题发现控制台上出现报错，a...
C#项目发布到IIS后CSS及Jquery出现问题的几种情况
MoonLight的博客
06-27 2534
项目发布到IIS后发现以下情况，CSS效果不按预期出现，JQUERY插件无法运行。 通过在浏览器中按F12调试发现，javascript部分出错，但在我的VS所在的计算上调试是没有问题的，因此，想到，估计是项目发布时没将所有相关的文件发布过去所致：解决过程：1、直接把文件拷贝到IIS对应的目录中，无效。 2、在VS项目管理里面检查对应的插件目录发现，部分插件的文件没有完全加载到项目，因此在发布项
处理http使用qiankun时会偶现子应用html被拦截问题
qq_43222625的博客
02-20 372
在使用qiankun主应用加载子应用的时候，会偶发性的出现子应用加载不出来的情况。经过排查，发现是在http下才会出现这个情况,qiankuan加载子系统时，会有较大概率出现混入了一个 cookie/flash.js的文件，然后出现加载错误。(升级成https就没有这个烦恼了)官网给出的是以下解决方案：打包完手动复制一份改后缀名当然可以，但是…提示：以下是本篇文章的代码实现，供自己学习或后续开发使用。
微前端（qiankun）中，主应用无法加载子应用的静态资源
weixin_44685906的博客
07-28 8826
微前端（qiankun）中主应用加载子应用资源
关于qiankun框架加载子应用时出现的问题
weixin_44745053的博客
08-21 1965
关于qiankun框架访问静态资源出现的问题
主应用是electron+vue3呢？
最新发布
08-08
### 三级标题：Electron + Vue3 主应用中集成 Qiankun 的关键配置 在 Electron + Vue3 构建的主应用中使用...- **性能优化**：利用 Qiankun 的 `prefetch` 机制提升子应用加载速度，减少首次加载时间 [^1]。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YAVSFEI

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值