脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue打包到服务器后请求接口报错404

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上传就可以正常访问了

总结

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

您可能感兴趣的文章:

相关文章

  • 关于vue2使用element UI中Descriptions组件的遍历问题详解

    关于vue2使用element UI中Descriptions组件的遍历问题详解

    最近element-ui遇到了很多坑,下面这篇文章主要给大家介绍了关于vue2使用element UI中Descriptions组件的遍历问题,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • Vue axios全局拦截 get请求、post请求、配置请求的实例代码

    Vue axios全局拦截 get请求、post请求、配置请求的实例代码

    这篇文章主要介绍了Vue axios全局拦截 get请求、post请求、配置请求的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-11-11
  • express+vue+mongodb+session 实现注册登录功能

    express+vue+mongodb+session 实现注册登录功能

    这篇文章主要介绍了express+vue+mongodb+session 实现注册登录,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-12-12
  • Vue源码之关于vm.$delete()/Vue.use()内部原理详解

    Vue源码之关于vm.$delete()/Vue.use()内部原理详解

    这篇文章主要介绍了Vue源码之关于vm.$delete()/Vue.use()内部原理详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • vue中引用文件路径问题小结

    vue中引用文件路径问题小结

    vue路径分为绝对路径、相对路径、~+路径 及 别名+路径,在js中,引入带别名的文件路径,不需要在别名前加~ ,在css或者style中引入的需要在路径前面加~,路径以 ~ 开头,其后的部分将会被看作模块依赖,本文给大家介绍vue中引用文件路径问题,感兴趣的朋友一起看看吧
    2023-12-12
  • Vue-cli 移动端布局和动画使用详解

    Vue-cli 移动端布局和动画使用详解

    这篇文章主要介绍了Vue-cli和移动端布局和动画使用详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue在路由中验证token是否存在的简单实现

    vue在路由中验证token是否存在的简单实现

    今天小编就为大家分享一篇vue在路由中验证token是否存在的简单实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • antd form表单数据回显操作

    antd form表单数据回显操作

    这篇文章主要介绍了antd form表单数据回显操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 详解vue跨组件通信的几种方法

    详解vue跨组件通信的几种方法

    本篇文章主要介绍了详解vue跨组件通信的几种方法 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue render函数动态加载img的src路径操作

    vue render函数动态加载img的src路径操作

    这篇文章主要介绍了vue render函数动态加载img的src路径操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10

最新评论