vue项目打包成dist文件夹之后后端请求报404错误解决方法

已于 2023-10-24 11:20:02 修改
阅读量6.3k 收藏 27
点赞数 3
分类专栏： 移动端 vue 文章标签： vue.js javascript 前端 1024程序员节
于 2022-11-17 00:17:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52126119/article/details/127895336
版权

目录

声明

背景：

解决方法一（简单）：关闭proxy代理

解决方法二：开发环境、生产环境配置

解决方法三：使用Nginx进行反向代理

声明

找了好多方法，并进行了归纳，本文仅提供思路，方便自己以后遇见同样问题有思路，文章会不断完善，若未能解决问题，请见谅！！！

背景：

前端Vue项目打包后部署在服务器上，而后端接口在另外一台服务器。本地生产环境运行时因为在Vue中配置了proxy代理，所以项目运行正常。但是在服务器开发环境中，一直报错404。

解决方法一（简单）：关闭proxy代理

（新手小白用其他方法不明白的可以试试）

新手小白，找了好多办法，要不就是太复杂，我搞不懂，要不就是没有某个文件，不会用；

查明原因proxy代理问题，有了灵感......

由于我是在帮别人改代码，在原有基础改的，后端已经配置好了跨域，我关闭了代理设置，

直接用后端路径和端口。

解决方法二：开发环境、生产环境配置

整理了几个博主写的比较清晰的解决方法

vue cli3.0 怎么配置 后端请求接口域名，区别打包环境及 vue项目域名的问题

Vue项目打包到服务器后请求接口报错404

解决方法三：使用Nginx进行反向代理

整理了写的比较清晰的文章

Vue项目本地运行正常，打包上传到服务器后请求地址404问题

如何将vue项目打包在服务器上使用nginx运行，并使用反向代理解决跨域问题

文章会日益完善，请见谅！！

颖儿♡＾▽＾♡
关注
  • 3
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何修改Vue打包后文件的接口地址配置的方法
01-19
1、背景 常规的vue项目分为本地环境和生产环境，我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可。但是最近在做的项目中，涉及到私有化部署，就是对应的生产环境的地址，不是唯一的。如果每次都修改一个地址，再打包文件进行部署，过程繁琐且低效。那么如何把环境地址设置成可配置的，不需要再构建代码就能直接生效呢？ 2、可选方案 进行了调研后，网上介绍的方案有2种： 1）在static上设置一个config.js，把配置的参数设置成 window 下的全局变量。这种方案的确可行，但是，但是，不安全！！！ 如果请求地址被恶意修改，后果不太好~ 2）使用
Vue项目build出dist文件夹上传服务器部署后，在浏览器刷新时出现404问题的原因及解决
最新发布
weixin_56450493的博客
07-05 365
参考。
vue项目打包部署到服务器上后页面404问题
qq_45963071的博客
11-24 1万+
当我们设置了mode为history时，当前端发送路径给服务端时，服务端根本就不认识省去#的url，所以返回给我们404，因为vue是单一页面所有的页面都在index.html中，vue是用js来切换页面的，具体的解释看vue官网。我使用的是宝塔面板，nginx服务器，在宝塔网站伪静态设置里添加此配置保存即可解决。
Vue项目本地运行正常，打包上传到服务器后请求地址404问题
北枫林
04-21 8616
问题解决： 把nginx里的配置里的 proxy_pass http://127.0.0.1:8080; 改成proxy_pass http://127.0.0.1:8080/; 多加一个斜杠。 问题分析： Vue项目打包完之后接口请求不到后端出现404错误，这是由于Vue项目打包之后 proxyTable代理配置失效了。 由于Vue项目打包之后代理失败，那么就需要使用Nginx进行反向代理请求了，可是还是出现404错误。在nginx中配置proxy_pass反向代理时，当在后面的url加上了 “/
vue项目本地开发完成后部署到服务器后报404
weixin_50367873的博客
11-17 3189
前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可我们知道vue项目在构建后，是生成一系列的静态文件常规布署我们只需要将这个目录上传至目标服务器即可让web容器跑起来，以nginx为例配置完成记得重启操作完后就可以在浏览器输入域名进行访问了当然上面只是提到最简单也是最直接的一种布署方式什么自动化，镜像，容器，流水线布署，本质也是将这套逻辑抽象，隔离，用程序来代替重复性的劳动，本文不展开。
解决vue打包项目后刷新404的问题
08-27
下面小编就为大家整理了一篇解决vue打包项目后刷新404的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue项目打包到服务器后请求接口报错404
热门推荐
speano的博客
05-22 1万+
解决Vue项目打包到服务器后请求接口报错404问题。
vue项目部署后刷新页面404的原因和解决方案
为技术而生
03-11 8138
vue项目打包部署上线后发现项目是可以正常运行，但是使用F5或者浏览器的刷新按钮直接变成404页面。 扩展：当项目部署到服务器子文件路径时资源404问题。
vue打包后，接口请求404的完美解决方案
10年职场两茫茫，35岁凄凉奈若何
09-24 2073
vue打包后，接口请求404的完美解决方案
解决vue项目打包后打开index.html无内容，出现404问题
qq_45532769的博客
10-31 4505
解决vue项目打包后打开index.html无内容，出现404问题
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
11-30
最近在使用webpack + vue做个人娱乐项目时，发现npm run build后，css js img静态资源文件均找不到路径，报404错误。。。网上查找了一堆解决办法，总结如下 一、首先修改config目录下的index.js文件 将其中build的配置项assetsPublicPath进行修改，改为 目的是将资源文件的引入路径，改为相对地址（相对index.html） 二、此时html中的js、css、img引入均没有问题，但是css中的background-image还是报404 此时的问题原因是，使用了相对地址后，在css进行引入的图片路径，其相对的是css文件的路径 此时的
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
11-20
本地开发没问题能正常请求到接口，部署后页面也能展示出来就是接口的数据请求不到 network一看是这么个情况 对比了本地的页面 可以发现是remote address出了问题。 经过查询得知：Remote Address代表的是当前HTTP请求的远程地址，即HTTP请求的源地址。 我的猜想是proxy代理在本地环境下用的是localhost即127.0.0.1进行转发代理的，而部署到服务器后相当于换了个环境（ ip地址和端口已经改变 ），此时proxy代理就出错了。 解决方法： 地址错误了，那就换到正确的地址。 即：本地开发环境 代理时用127.0.0.1，生产环境用服务器的ip 在Vue
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
08-27
总结起来，解决Vue项目在Tomcat上使用History模式刷新报404错误的步骤包括： 1. 在打包后的项目根目录下创建`WEB-INF`文件夹，并在其中创建`web.xml`。 2. 编写`web.xml`，设置404错误重定向到`index.html`。 3. 在...
解决vue-cli项目打包出现空白页和路径错误的问题
10-18
通过在命令行中执行`npm run build`，Vue CLI会将源代码编译并打包成一个名为`dist`的文件夹，其中包含部署到生产环境所需的静态资源。在这个过程中，Vue CLI会处理路径，将所有静态资源（如CSS、JS文件）重定位到...
Vue项目部署在Spring Boot出现页面空白问题的解决方案
10-17
总结来说，解决Vue项目部署在Spring Boot中出现页面空白和404错误的问题，主要需要关注前后端配置的对接和资源加载路径的适配。这需要对Vue项目和Spring Boot的配置都有清晰的认识，并且能够根据不同情况灵活调整...
解决vue+webpack打包路径的问题
08-27
1. **配置Vue Router的routes**：由于你的项目被放置在资源项目的`public`文件夹下，并且`public`目录配置的访问路径为`/`，因此Vue Router的路径需要进行调整。你需要将每个route的`path`属性加上项目名，即`/vue-...
vue打包运行并解决404问题
Littleree的博客
06-28 204
vue打包运行并解决404问题
vue项目，前端怎么给后端一个测试版本
03-29
1. 打包静态文件：使用npm run build命令将vue项目打包成静态文件，将打包生成的dist目录中的文件复制到后端项目的静态文件目录中，如public或static文件夹。 2. 修改后端接口地址：在vue项目中，将所有API请求的地址改为测试环境的地址，并在vue.config.js中配置代理，将API请求代理到测试环境的后端接口。 3. 提交代码：将修改后的代码提交到代码仓库，并通知后端人员进行测试。 4. 测试反馈：根据后端人员的反馈，修改前端代码，并重复以上步骤直至测试通过。 5. 发布正式版本：测试通过后，将修改后的代码打包成正式版本，将打包生成的dist目录中的文件复制到后端项目的静态文件目录中，并将API请求的地址改为正式版本的地址。然后再次提交代码，通知后端人员进行正式环境的测试。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值