Vue项目打包ProxyTable失效的解决办法

Vue项目打包ProxyTable失效问题

  前端人员昨天将项目打包出来交给我们部署到tomcat，但是发现所有的ajax请求都会报错,请求路径和后台接口不一致。但是前端人员已经跑路去其他项目,身为后端的我们只有自己去找什么情况。我们发现前端代码中所有的请求路径都是经过它内部的一个叫ProxyTable转换过的，百度了一下这个ProxyTable会在打包后失效，所以要想部署成功就得引进其他的反向代理工具。

Nginx的使用

  首先去下载一个Nginx，linux系统就下载后缀为tar.gz的,windows系统下载后缀zip的就行。下载完成后解压出来，将VUE打包的dist文件夹放到nginx里的html文件夹下。然后再找到nginx里的conf文件夹，然后选择对nginx.conf进行编辑。

 server {
        listen       8080;   #用于监听的端口,配置为原vue项目启动端口
        server_name  localhost; #nginx拦截的地址,也可使用通配符拦截(具体百度用法)

然后往下拉找到 location /，这一步是拦截具体的地址如：localhost:8090/

  location / {
            root   html\dist; #该路径就是之前放置Vue包的路径，根据你的项目实际路径来配
            index  index.html index.htm; #跳转的欢迎界面，根据你的项目首页来配
        }

然后是最重要的一步，将ProxyTable里的请求地址配到nginx里

location /apis/ {
            proxy_pass   http://127.0.0.1:8090/;
        }

这个apis是Vue中配置的代理路径,将下面proxy_pass路径改为ProxyTable中的target路径,即可解决部署项目前端网页请求接口报错原因