vue使用代理打包之后404，405问题排查

今天前端说他的服务部上去发现404，405

环境：后端接口已经部署并进行了域名解析；
问题：前端本地 npm run dev没问题，打包之后出现404然后出现405；
凭借我多年的经验首先锁定到nginx上

解决思路如下：

1、模拟生产环境

• 后端的接口是正常的，并且进行了域名解析，跨域设置（这里后端的朋友注意下cors跨域)

• 所以只需要模拟出前端环境和运维环境就可以了

  • 前端环境：为了紧着不麻烦别人的态度，自己随便git一个vue项目，改一下打包环境，主要如下：
    vue.config.js

  其中VUE_APP_BASE_API我这里是在下全局设置的为/apii/，其实就是前端代理的前缀：http://前端ip:port/apii/后端接口

  • 运维环境：
    自己刚好有云服务器，ubuntu系统，真的是难用，好多插件都没有，安装起来也是麻烦一堆，
    主要是：1、装nginx，tomcat（运行前端打包后的静态文件)

问题解决

1、前端npm run build:prod 后生成的dist文件往tomcat- ROOT目录中一丢，ok跑起来了
2、接下来是nginx的配置了

因为前端请求后端进行了代理，通过apii前缀访问到后端接口，所以我的思路是必须要让这个前缀换成我后端的域名:端口，nginx中配置代理如下：这里是不需要进行ssl证书认证的

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            proxy_pass  http://127.0.0.1:8081;
        }
		# 主要就是这里，只需要nginx反向代理apii这个前缀就可以了，
		location /apii {
			# 这个是把apii前缀给去掉
			rewrite  ^/apii/(.*)$ /$1 break;
			# 这个就是后端的接口地址
            proxy_pass https://xx.xxx.com:10086;
        }
........

然后就可以了~