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

总结

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