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

最新推荐文章于 2023-02-27 14:35:03 发布
最新推荐文章于 2023-02-27 14:35:03 发布
阅读量454 收藏
点赞数
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YAVSFEI/article/details/120727189
版权

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

YAVSFEI
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
解决vue单页面应用进入页面加载所有 js 的问题
11-19
首先，我们来看标题提到的问题："解决vue单页面应用进入页面加载所有 js 的问题"。通常，开发者会在`index.js`等主入口文件中静态导入所有页面组件，例如： ```javascript import My from '@/pages/my' import Cart...
Vue子组件中渲染动态组件无效（第一次无效、第二次有效）
Alecor的博客
07-27 6439
问题分析 今天在写代码的时候，用到了 Vue框架的动态组件，本来用的好好的（具体用法参考官方文档），后来改进了一下业务功能，在子组建中也使用了和父组件相同的动态组件方法，由于子组件采用对话框i的形式，但是子组件中的动态组件却没有加载出来；准确来说是 第一次没有加载出来，返回上一级界面，重新进入组件，在打开对话框子组件有加载出来了 引入Vue 和 ElementUI parent.vue &...
Qiankun 踩坑集合
最新发布
qq_38648558的博客
02-27 1492
Qiankun使用的时候的可能遇到的问题。
微前端（qiankun）中，主应用无法加载子应用的静态资源
weixin_44685906的博客
07-28 7434
微前端（qiankun）中主应用加载子应用资源
微前端qiankun事务引发的问题
petertanjinjie的博客
11-21 552
背景近期客户发现一个问题，说我们系统打不开了。但是只有这个客户发现了这个问题，刚好今天周一于是决定处理这个问题，影响太大了，用户一个办公室都打不开我们系统刚好一线妹子特别着急，人好像漂亮声音又好听，电话叫我一直别挂。我就决定认真处理这个问题排查通过远程访问用户电脑，实际操作打开我们系统发现不可用。qiankun微前端子应用加载失败，但是在我们电脑上、网络环境均可访问发现问题发现控制台上出现报错，a...
VUE项目修改项目名后发布，加载js失败？
tangbinflash的专栏
08-24 1020
VUE修改项目后发布到网站，加载不到js等资源解决办法
Window下，运行vue（输入命令）遇到无法加载文件的问题
毛毛的博客
10-11 274
在创建vue项目的时候遇到无法加载文件的情况 在运行npm命令时候无法加载文件的情况
解决vue-cli3 使用子目录部署问题
10-18
然而，当你尝试将构建后的应用部署到服务器的子目录，例如 `/myapp` 下，浏览器尝试加载资源时，URL 将以 `/myapp/dist/` 开头，而不是期望的 `/dist/`。为解决此问题，你需要修改 `vue.config.js` 中的 `baseUrl`：...
详解vue通过NGINX部署在子目录或者二级目录实践
10-18
在实际项目中，有时我们需要将Vue应用部署到服务器的子目录或二级目录下，而不是作为顶级域名的直接入口。这时，我们可以利用NGINX的反向代理功能来实现这一需求。NGINX是一款高性能的HTTP和反向代理服务器，能够...
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
08-27
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题 在单页面应用（SPA）中，首次加载时资源过多是导致速度缓慢的主要原因之一。为了解决这个问题，文章主要介绍了使用vue-router的懒加载解决首次加载...
详解vue页面首次加载缓慢原因及解决方案
12-13
第一次打包vue的项目部署到服务器下时，发现初次加载特别的缓慢，将近20s页面才加载出来，完全没有开发环境上的那么流畅。主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大，一次想要全部加载完成会...
Web前端Vue判断是否是首次进入页面
maoge_666的博客
02-06 1037
Web前端Vue判断是否是首次进入页面
qiankun加载vue子应用报错[import-html-entry]: error occurs while executing normal script
热门推荐
好记性不如烂笔头
05-25 1万+
网上查询该报错信息发现和我遇见的问题不同，发现别人都是因为JS文件引用出的问题，将JS文件引用改为html引用的方式，同时添加ignore属性，如： <script src="..." ignore></srcipt> 而我并未引用js，经自已排查后发现问题出在子应用以下部分： if (window.__POWERED_BY_QIANKUN__) { __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_Q
创建项目时，出现了vue无法加载怎么办？
qq_53239194的博客
09-10 827
创建项目时，出现了vue无法加载怎么办？ 1、开始菜单输入powershell，powershell ISE或者直接powershell命令行都ok，选择以管理员身份运行。 ​
Vue首次加载太慢之性能优化
weixin_56242672的博客
07-27 1万+
首页加载很慢的问题。首次加载大概需要50s，页面才能出来。总结如下原因原因1由于vendor.js和app.css较大，UI渲染线程并不会优先加载他俩，但是VUE等主流的单页面框架都是js渲染htmlbody的,所以必须等到vendor.js和app.css加载完成后完整的界面才会显示。原因2还有一个原因就是单页面首次会把所有界面和接口都加载出来，会有多次的请求和响应，数据不能马上加载二者相加所以会有长时间的白屏。...
Vue项目部署到服务器上问题解决方法
lisheng0947的博客
12-21 2933
相信很多小伙伴在用Vue-cli安装的脚手架开发的时候，在开发环境中项目可以很正常的运行，但是进入到生产环境，编译打包后，放入服务器，项目就不正常了，会出现空白页或者路由跳转404等问题。遇到这些问题不要慌张，正确的配置加上后端的简单配合就可以解决。 如何打包：基于Vue-Cli,通过npm run build来进行打包的操作 如何部署 将打包出来的资源，基于Vue-Cli的一般是dist目录下有static目录和index.html文件，可以直接将这两个文件扔到服务端 但有时候，我们会直接将dis
Vue项目启动默认打开http://0.0.0.0:8080，浏览器显示无法访问，手动修改为 localhost:8080 可正常打开
weixin_42222436的博客
11-04 4828
vue-cli 5.x 版本 使用–open 时，默认打开浏览器，会出现0.0.0.0:8080，浏览器显示无法访问，手动修改为 localhost:8080 可正常打开，但是每次都需要修改就很烦人。
处理vue自动打开浏览器，显示0.0.0.0失败，手动输入可以正常打开的问题
m0_46301172的博客
03-16 3287
引用 项目根目录创建一个 vue.config.js 文件，代码如下： module.exports = { devServer: { port: 80, host: '0.0.0.0', }, }; 执行serve运行命令，再次测试： 你的本机ip和localhost都可以访问成功
vue 公共头部初次加载数据失败
sky_sunshine_x的博客
09-03 374
<!--顶部--> <topHead v-if="getInfoTrue"></topHead> data() { return { getInfoTrue:false,//默认不加载子组件 } } getBannerList(){ getHone().then(response => { var _this=this; _this.getInfo...
基于SpringBoot和Vue框架的电子招投标系统的设计与实现.pdf
12-31
"该资源是一篇关于基于SpringBoot和Vue框架的电子招投标系统设计与实现的研究生毕业论文。作者通过分析法院招投标业务需求，采用MVC思想、SpringBoot、Vue、Mybatis和Activiti等技术，实现了电子招投标系统的各个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

YAVSFEI

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

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

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

打赏作者

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

抵扣说明：

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

余额充值