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

已于 2023-10-24 11:20:02 修改
阅读量5.4k 收藏 25
点赞数 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
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli打包后本地运行dist文件中的index.html操作
10-14
主要介绍了vue-cli打包后本地运行dist文件中的index.html操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
08-27
今天很郁闷，遇到这样一个奇葩问题，使用webpack打包vue后，将打包好的文件，发布到Tomcat上，访问成功，但是刷新后页面报404错误，折腾半天才解决好，下面小编把Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案分享给大家，需要的朋友一起看看吧
vue项目部署后刷新页面404的原因和解决方案
最新发布
为技术而生
03-11 1861
vue项目打包部署上线后发现项目是可以正常运行，但是使用F5或者浏览器的刷新按钮直接变成404页面。 扩展：当项目部署到服务器子文件路径时资源404问题。
解决vue项目打包上服务器显示404错误,本地没出错的问题
01-22
1、使用脚手架搭建一个vue项目 2、运行，在本地运行没问题，接着打包上服务器，遇到404的错误，如下 这是webpack打包的结果，解决办法如下 1、修改build文件夹下的utils.js文件，大约在51行添加 publicPath:../../ if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:../../ }) } else { return ['vue-style-loa
【vue项目问题解决】如何做到webpack打包vue项目后，可以修改配置文件IP和端口
球球博客
10-15 2235
记录在项目开发过程中遇到的小问题，积累开发经验，欢迎大家一起留言探讨 问题 我们在vue项目中打包的时候，webpack会将我们的组件，html，js，css，jpg等其他文件进行打包，其中请求的ip和端口也是在开发过程中写好的，直接打包生成了相应的js，如果此时我们想要修改请求的IP和端口，需要修改打包后的文件，不好查找，并且也容易出错。 期望效果 打包之后，可以通过修改某个配置文件，进行ip和端口的配置 代码实现 1、public文件夹下创建config.js,将apiURL添加到window对象中.
vue build打包以后数据接口404
kaijuzhiyouyitiaogou的博客
10-25 2010
vue打包以后接口出现404问题 在做vue开发做打包处理的时候，发现数据接口出现了404的情况，这种情况是因为在生产模式下，我们的服务器没有设置跨域这个问题，所以只需要用nginx进行反向代理一下就好了，进入nginx.conf配置文件加入下面代码就可以解决这个问题 location /api { rewrite ^.+api/?(.*)$ /$1 break; proxy_pass http://www.htnewdemo.com; #node
Vue项目打包到服务器后请求接口报错404
speano的博客
05-22 1万+
解决Vue项目打包到服务器后请求接口报错404问题。
vue填坑之webpack run build 静态资源找不到
热门推荐
qq_30346089的博客
09-12 2万+
vue cli搭建的项目，在本地测试调试都OK，运行npm run dev之后运行正常,run build后放到线上找不到静态资源文件路径，最后终于解决
【vue】项目打包&部署到tomcat&express部署&无法请求后台接口404&Access-Control-Allow-Origin跨域问题
hanne_lovegood的博客
03-30 8259
cnpm run build 打包到项目文件夹下的dist; vue部署到tomcat 安装express: npm install express -g npm install express-generator -g 配置环境变量 express expressDemo创建项目 npm install下载依赖 把dist目录下的所有文件（static包和index.html）复制到express项目的public文件夹下； npm start 启动项目； 设置页面图标； 404错误 跨域问题 修改端口号
vue项目本地开发完成后部署到服务器后报404
weixin_50367873的博客
11-17 2929
前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可我们知道vue项目在构建后，是生成一系列的静态文件常规布署我们只需要将这个目录上传至目标服务器即可让web容器跑起来，以nginx为例配置完成记得重启操作完后就可以在浏览器输入域名进行访问了当然上面只是提到最简单也是最直接的一种布署方式什么自动化，镜像，容器，流水线布署，本质也是将这套逻辑抽象，隔离，用程序来代替重复性的劳动，本文不展开。
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
10-15
在本篇文章里小编给大家整理了关于Vue3项目打包后部署到服务器 请求不到后台接口解决方法，有需要的朋友们可以参考下。
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
01-22
vue项目中使用npm run build打包后会生成一个dist文件，使用git推送项目后，发现git上少了一个dist文件，为什么明明本地项目中有这个文件而推上去就没有了呢？ 这里会先介绍.gitignore，不想看的 请直接跳过介绍 看...
vue打包代理接口404
指尖下的精灵
07-31 3725
一般这种情况，都是在前端配置了反向代理，如下图： 图中的 api 就可以代替 target 中的后台地址，这个在线上环境是有问题的，api 在线上环境就变成了字符串，所以所有接口都会出现404问题 前端解决方案如下： 在项目目录中添加 .env 文件，配置线上打包地址 在 main.js 中打印查看是否正确 添加 axios 拦截器，线上环境把 /api 截取掉 OK，这样接口404问题就...
vue项目打包部署到服务器上后页面404问题
qq_45963071的博客
11-24 1万+
当我们设置了mode为history时，当前端发送路径给服务端时，服务端根本就不认识省去#的url，所以返回给我们404，因为vue是单一页面所有的页面都在index.html中，vue是用js来切换页面的，具体的解释看vue官网。我使用的是宝塔面板，nginx服务器，在宝塔网站伪静态设置里添加此配置保存即可解决。
vue项目打包后代理接口报404错误的前端解决方案
weixin_42258621的博客
11-14 1万+
vue项目打包后代理接口报404错误的前端解决方案 vue的项目中使用axios发送ajax请求，因为跨域，使用了proxy反向代理，开发环境测试没有问题，但是项目打包放到生产环境时报404错误，查了一下解决方案，可以后端设置nginx解决，但是我们这个项目服务器没用nginx，所以提供一个前端的解决方案 一般这种情况，都是在前端使用了反向代理 开发环境中，图中的rongda-home就会代替t...
vue打包后页面为空白或者路由跳转404解决
qq_24683975的博客
01-10 1702
build后生成的dict文件夹内的index.html打开是空白页面，此时在。编辑nginx配置文件，添加如下代码。
解决vue项目打包后打开index.html无内容，出现404问题
qq_45532769的博客
10-31 3929
解决vue项目打包后打开index.html无内容，出现404问题
vue使用代理打包之后404，405问题排查
偶尔写些东西，意思一下我也参与了内卷
06-22 5989
后端的接口是正常的，并且进行了域名解析，跨域设置（这里后端的朋友注意下cors跨域)所以只需要模拟出前端环境和运维环境就可以了1、前端npm run build:prod 后生成的dist文件往tomcat- ROOT目录中一丢，ok跑起来了 2、接下来是nginx的配置了...
宝塔部署vue项目跨域
09-03
宝塔面板可以通过Nginx来部署Vue项目，并解决跨域问题。在部署过程中，需要进行以下步骤： 1. 首先，使用npm run build命令打包Vue项目，成功后会在项目根目录下生成一个dist文件夹。 2. 在宝塔面板中，选择对应的网站，点击设置，进入网站设置页面。 3. 在左侧菜单中，点击Nginx，进入Nginx配置页面。 4. 在Nginx配置页面的顶部，可以看到一段配置示例，将这段示例替换为以下配置代码： ``` location / { root /path/to/your/dist; # 指向Vue项目打包后的dist文件夹路径 index index.html index.htm; } location /api/ { proxy_pass http://localhost:9777/; # 将请求转发到后端接口的运行端口 } ``` 注意将`/path/to/your/dist`替换为你实际的Vue项目dist文件夹的路径，将`http://localhost:9777/`替换为你实际的后端接口的运行端口。 5. 保存并应用配置。 通过以上步骤，宝塔面板已经成功部署了Vue项目，并且解决了跨域问题。你可以通过公网IP加上Vue项目的端口号和项目名称来访问部署的项目。例如，`公网IP:Vue项目端口号/项目名称`。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [宝塔部署项目&跨域](https://blog.csdn.net/u014632228/article/details/129066281)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [Spring Boot + Vue 前后端分离项目的部署](https://blog.csdn.net/qq_45716120/article/details/112985281)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值