vue项目的部署问题

由于之前自己一直是在本地开发，开发完之后也只是执行npm run build直接放在指定的位置，并没有过多的考虑项目是如何在服务器上跑起来，这次是自己一个人负责从头搭建到部署到服务器上，所以开始考虑和更深入的了解这方面的知识。

在部署的时候首先遇到的问题是，在本地开发时我使用了vue-cli自动生成的proxyTable解决的代理转发和跨域问题，但是真正build出来放在服务器上时再去访问后台接口就会报404，因为前端代码和后台代码不在同一个服务器上，而且在服务器上没有做代理转发，在服务器上访问的接口是服务器的IP+接口地址，而不是后台的IP+接口地址，这样就造成了404，我使用的解决方式是使用nginx做的代理转发请求和后台修改跨域。因为nginx在转发代理使用时请求头部就会不起作用。

如何配置nginx做代理转发呢？

server {

#配置HTTP服务器监听的端口号，这里默认写为8880

listen      8880;

server_name 此处是你的服务器IP;

location / {

#替换下面的地址为您网页目录地址

add_header Access-Control-Allow-Origin *;

#该位置是你的网页目录地址，例如我的dist文件的位置是/home/user/dist

root /home/user/dist

index  index.html index.htm;

}

error_page  500 502 503 504  /50x.html;

location = /50x.html {

root  html;

}

#下面配置Tomcat或WAS服务器的地址，服务程序会自动进行代理转发

#下面就是代理转发，当遇到请求中带有api时就换将api前面的内容，包括api，替换成下面的proxy_pass，proxy_pass地址输入的是后台接口的IP地址，比如我需要联调的后台接口地址是：http://10.120.189.181:8080/。

location ^~ /api/ {

proxy_pass http://10.120.189.181:8080/;

}

}

记住：vue项目部署的时候build出来的是一个静态文件，我们只需要使用nginx做一下指向，指向dist文件下的index.html即可。如果前端代码和后台代码不在一个服务器上就需要使用nginx做一个代理转发和跨域处理。如果前端代码和后台代码在一个服务器上，就不需要做代理转发和跨域处理。