脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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上传就可以正常访问了

总结

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

您可能感兴趣的文章:

相关文章

  • vuex中的state属性解析

    vuex中的state属性解析

    这篇文章主要介绍了vuex中的state属性，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • Vue3项目中的hooks的使用教程

    Vue3项目中的hooks的使用教程

    今天我们稍微说一下 vue3 项目中的 hooks 的使用，其实这个 hooks 呢是和 vue2 当中的 mixin 是类似的，学习过 vue2 的小伙伴一定对 mixin 一定比较熟悉，快跟随小编一起来学习学习吧
    2022-08-08
  • Vue仿微信app页面跳转动画效果

    Vue仿微信app页面跳转动画效果

    这篇文章主要介绍了Vue仿微信app页面跳转动画效果，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 基于iview-admin实现动态路由的示例代码

    基于iview-admin实现动态路由的示例代码

    这篇文章主要介绍了基于iview-admin实现动态路由的示例代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • Vue之定义全局工具类问题

    Vue之定义全局工具类问题

    这篇文章主要介绍了Vue之定义全局工具类问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • VUE动态生成word的实现

    VUE动态生成word的实现

    这篇文章主要介绍了VUE动态生成word的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue+mui实现图片的本地缓存示例代码

    Vue+mui实现图片的本地缓存示例代码

    这篇文章主要介绍了Vue+mui实现图片的本地缓存的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • vue 虚拟DOM快速入门

    vue 虚拟DOM快速入门

    这篇文章主要介绍了vue 虚拟DOM的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
    2021-04-04
  • elementUI select组件value值注意事项详解

    elementUI select组件value值注意事项详解

    这篇文章主要介绍了elementUI select组件value值注意事项详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vuex存值与取值的实例

    vuex存值与取值的实例

    今天小编大家分享一篇vuex存值与取值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论