vue文件上传速度慢，有可能是nginx配置的问题

最新推荐文章于 2024-04-15 15:36:19 发布
最新推荐文章于 2024-04-15 15:36:19 发布
阅读量1.9k 收藏 1
点赞数 2
分类专栏： Linux java 文章标签： vue java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L_HAI_Q/article/details/109627744
版权

排查问题以及解决方法

  1. 当我尝试了多种代码优化后发现上传速度还是一样慢，这时我发现每次文件上传网络流量很奇怪。如下图：（Linux 命令 nload 查看流量）
    在这里插入图片描述

  2. 这时排查一下nginx的跨域配置，发现后端的配置是服务器的ip，将ip修改成localhost，修改的前提是前后端的项目是放在同一个服务器。
    在这里插入图片描述

修改后结果

  1. 看下图，你会发现文件上传完后，上下行流量没有进行转换，上传的速度也大大提成。
    在这里插入图片描述

    记录一下自己踩过的坑，如果对你有帮助麻烦给博主一个赞鼓励一下✿✿ヽ(°▽°)ノ✿

矫情重度患者
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Vue项目部署Nginx配置文件 SSL
08-11
Vue项目结果build编译后，放在Nginx的html文件夹内，替换该配置文件，就可以在Nginx服务器上运行Vue项目
nginx配置文件上传大小，超时时间
FourAu的博客
06-01 1100
nginx配置文件上传大小。
nginx PHP大文件很慢,通过设置nginx的client_max_body_size解决nginx+php上传大文件的问题...
weixin_35599225的博客
03-19 622
通过设置nginx的client_max_body_size解决nginx+php上传大文件的问题通过设置nginx的client_max_body_size解决nginx+php上传大文件的问题：用nginx来做webserver的时，上传大文件时需要特别注意client_max_body_size这个参数,否则会中断在nginx的请求中,在php中是无法记录到访问的.一般上传大文件流程：首先修...
使用nginx反向代理做前后端分离 上传大文件速度特别慢
创智围光
04-20 6223
出现的问题 环境 VUE+JAVA 问题描述 在本地上传100MB+的文件速度特别快，基本上十几秒钟可以上传结束 但是上传到服务器后，需要5分钟以上，服务器带宽10MB（阿里云） 检查结果 经过多次检查后发现出现这样问题是因为线上服务器使用nginx作反向代理，实现前后端分离，由于NGINX的默认配置，导致文件上传速度慢 处理方法 处理NGINX的文件上传缓存，配置如下： location ~ /fastfile { # /fastfile 是我上传文件的地址，根据需要可以改配置 client_
Nginx反向代理部署在K8s上的seafile服务，上传文件缓慢的解决方案
bynever的博客
02-09 1414
Nginx反向代理k8s搭建的seafile服务，上传文件速度缓慢
Nginx 上传大文件超大超时解决办法
weixin_38306434的博客
01-15 1万+
问题：用nginx作代理服务器，上传大文件时（本人上传8M左右的文件），提示上传超时或文件过大。 浏览器调试报413 （Request Entity Too Large）错误,如下图所示 原因是nginx对上传文件大小有限制，而且默认是1M。另外，若上传文件很大，还要适当调整上传超时时间。 解决方法：在nginx的配置文件下（找到你的nginx文件/conf/nginx.conf）...
Nginx 上传大文件超时解决办法
热门推荐
liutong123987的专栏
02-09 2万+
情况如下：用nginx作代理服务器，上传大文件时（本人测试上传50m的文件），提示上传超时或文件过大。原因是nginx对上传文件大小有限制，而且默认是1M。另外，若上传文件很大，还要适当调整上传超时时间。解决方法是在nginx的配置文件下，加上以下配置：?123456client_max_body_size     50m; //文件大小限制，默认1mclient_header_timeout  ...
Nginx上传文件很慢很慢
u014240299的专栏
04-22 9680
收到同事反馈，一个上传apk的接口，传一个180多兆的文件，一直转圈，最终提示上传文件失败 Bug所处背景 带宽为10M的云服务器，额，，，就算按照7M的带宽，如果是一个180M的文件，网络顺畅的话，大概需要xxx 项目主要是前端用formData封装文件，然后调用上传接口。 项目四 查找原因 nginx 的error 日志里发现，请求里的body太大了。还有就是前端控制台会报一个ERROR_...
关于vue项目打包部署到nginx服务器，由于js文件过大导致首次加载速度过慢的解决办法和踩坑
yorcentroll的博客
10-22 1万+
很多时候，一个vue项目打包下来，app.js 主文件都会有几兆，大点的项目都会有十几二十兆，还有app.css的打包文件可能也会很大。 对于一般的服务器来说，首次去打开部署好的平台页面，加载起来会很慢。 这样的速度肯定是不能容忍的。 当然，首要的途径是先尽量给打包文件app.js和app.css减重，让它更轻。不过，大部分时候，这个文件再怎么建你也不能从20M减到10M,5M，甚至更小。 ...
Vue项目部署到服务器上的一系列问题（Nginx）？
Roben_的博客
05-31 417
Vue项目部署到服务器上慢怎么办（Nginx）？一、路由懒加载路由懒加载方式CDN引入如果npm run build 后产生了一些.map文件发布到服务器上后刷新404问题 一、路由懒加载 如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时 路由懒加载方式 参考：https://
Nginx配置文件+VUE路由项目实例.zip
12-07
VUE history模式下的VUE示例 跨越微信五个支付目录限制的Nginx配置 VUE打包上线后的Nginx配置 配合我的文章说明使用, 效果更佳哦 文章: VUE history模式, 后端配置, 微信支付目录限制
nginx 部署 vue 项目找不到js css文件的解决方法
09-29
主要介绍了nginx 部署 vue 项目找不到js css文件的解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
nginx配置多个vue项目
01-11
nginx 下配置多个 vue 项目 举例: blog: https://www.yoursite.com/blog test: https://www.yoursite.com/test vue项目中配置 vue-router 设置 base 路径 base: ‘/blog/’ config/index.js 修改 ...
关于Ribbon在SpringCloudAlibaba2021.1版本中，找不到服务实例
aoxiaojun的博客
04-12 463
关于Ribbon在SpringCloudAlibaba2021.1版本中，找不到服务实例
java面向对象.day21（继承02--super）
BaiZhuYuan的博客
04-14 732
super===父this===当前使用super时，首先要继承父类，其次是在子类里面才能使用super。继承父类后，运行子类时会同时调用父类的构造方法，如果要显性调用父类的构造方法必须在子类的第一行调用。单使用super()表示调用父类构造方法，单使用this()表示调用本身的构造方法。父类具有有参的构造方法时，并且没有显性无参构造方法，那么子类要使用时必须直接调用父类的有参构造方法，
Ubuntu部署jmeter与ant
weixin_71807218的博客
04-12 1052
为了整合的持续集成工具，我将jmeter与ant都部署在了Jenkins容器中，并配置了build.xml1：先下载jdk-8u74-linux-x64.tar.gz，上传到服务器，这里上传文件用到了ubuntu 下的​2：解压tar包。执行 tar -xvf jdk-8u74-linux-x64.tar.gz ，解压jdk包，生成 jdk1.8.0_74 目录​3：配置环境变量在最后面增加两行执行命令：source /etc/profile，配置的环境变量生效。
常见Spring相关工具报错-源码分析
小百的博客
04-15 393
在 getResources 中会获取 getResources(“classpath*:” + i18n/messages + “.properties”)，但是缺少messages.properties属性文件。3️⃣ 源码分析 MessageSourceAutoConfiguration 配置类。4️⃣ 解决：补充 messages.properties 文件。
Java IO流-字节流
最新发布
qq_40603125的博客
04-15 499
上述两两结合一下，就得到四种大的分类。使用循环一个个字节输入。
Java代码基础算法练习-自定义函数之求字符串长度-2024.04.13
Sakurapaid的博客
04-13 330
写一函数，求一个字符串的长度（字符串长度不超过255），然后在主函数中调用该函数 实现求长度操作。
nginx配置vue 找不到 js 文件
11-15
当在 nginx 上配置 Vue 项目时，可能会遇到找不到 js 文件的问题。这通常是因为 nginx 配置文件中缺少对静态文件的正确配置导致的。 首先，需要确保在 nginx 的配置文件中正确设置了静态文件的路径。在配置文件中添加类似下面的代码： ``` server { ... location / { try_files $uri $uri/ /index.html; } location /js { alias /path/to/your/vue/project/dist/js; } ... } ``` 在这个例子中，我们通过 location 指令来指定对于 /js 路径的请求应该映射到 Vue 项目中 dist 目录下的 js 文件夹。确保你的路径和实际项目路径保持一致。 其次，需要确保项目打包后的输出路径正确。在使用 vue-cli 构建项目时，可以通过修改 vue.config.js 文件中的 publicPath 属性来设置输出路径。确保 publicPath 设置正确，使得 Vue 项目能够正确加载静态资源。 最后，重启 nginx 服务器以应用新的配置。使用以下命令重启 nginx： ``` sudo systemctl restart nginx ``` 通过这些步骤，应该能够解决 nginx 配置 Vue 项目时找不到 js 文件的问题。如果仍然遇到困难，建议仔细检查配置文件中的路径和文件夹名称，并查看 nginx 错误日志以获取更多信息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值