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

更新时间：2023年05月18日 09:43:28 作者：Tearl

这篇文章主要介绍了Vue项目打包到服务器后请求接口报错404的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue打包到服务器后请求接口报错404

前端Vue项目打包后部署在服务器上，而后端接口在另外一台服务器。

本地生产环境运行时因为在Vue中配置了proxy代理，所以项目运行正常。但是在服务器开发环境中，一直报错404。

原因

在开发环境中设置了proxy代理后，打包时proxy代理就会失效，因为proxy代理并不会一起打包到开发环境的dist文件夹下。

解决方案

1.在开发环境中配置proxy反向代理

.env.development 开发环境

# just a flag
ENV = 'development'
Mock: true
# base api
VUE_APP_BASE_API = 'http://localhost:3000/' //这里放开发环境的接口地址

.env.production 生产环境

# just a flag
ENV = 'production'
Mock: false
# base api
VUE_APP_BASE_API = 'http://xx.xxx.xxx.xx/' //这里放生产环境的接口地址

2.服务器配置Nginx反向代理

以宝塔举例：Nginx反向代理配置有两个地方

第一个软件面板上面这里面有一个配置，如果在这里配置代理不生效

第二个就是在打包生产环境上传到服务器上的网站设置里面

在配置文件中添加

location /api/ 
{
    rewrite  ^.+api/?(.*)$ /$1 break;
    proxy_pass http://xx.xxx.xxx.xx/;     //后端的请求接口
}

问题解决。

vue项目打包后上传到服务器，访问页面报错net::ERR_ABORTED 404 (Not Found)

当访问页面时出现以下报错该如何解决？

首先需要创建文件

然后复制以下代码到vue.config.js

module.exports = {
    publicPath: "./"
}

现在build上传就可以正常访问了

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue中的加密方式总结
这篇文章主要为大家详细介绍了vue中常见的加密方式实现,例如js-base64、crypto-js、jsencrypt、bcryptjs,文中的示例代码讲解详细,需要的小伙伴可以参考一下
2023-11-11
vue Cli 环境删除与重装教程 - 版本文档
这篇文章主要介绍了vue Cli 环境删除与重装教程 - 版本文档，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
Vue项目如何改变屏幕尺寸重新刷新页面-计算页面尺寸
这篇文章主要介绍了Vue项目如何改变屏幕尺寸重新刷新页面-计算页面尺寸，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue 实现把表单form数据转化成json格式的数据
今天小编就为大家分享一篇Vue 实现把表单form数据转化成json格式的数据，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
在移动端使用vue-router和keep-alive的方法示例
这篇文章主要介绍了在移动端使用vue-router和keep-alive的方法示例，vue-router与keep-alive提供的路由体验与移动端是有一定差别的，感兴趣的小伙伴们可以参考一下
2018-12-12
vue如何重置data的所有属性
这篇文章主要介绍了vue如何重置data的所有属性，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue通过elementUI组件实现图片预览效果
我们在开发中经常会遇到通过点击某个按钮或者文字实现图片的预览功能,这里我们分别介绍vue2和vue3里面如何实现图片预览方法,需要的朋友可以参考下
2023-09-09
vue之数据交互实例代码
本篇文章主要介绍了vue之数据交互实例代码，vue中也存在像ajax和jsonp的数据交互，实现向服务器获取数据，有兴趣的可以了解一下
2017-06-06
vue组件讲解(is属性的用法)模板标签替换操作
这篇文章主要介绍了vue组件讲解(is属性的用法)模板标签替换操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue项目element-ui级联选择器el-cascader回显的问题及解决
这篇文章主要介绍了vue项目element-ui级联选择器el-cascader回显的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07