Vue项目打包后Proxy失效的问题

Vue项目打包后Proxy失效的问题

在vue.config.js中配置了proxy跨域后执行npm run build打包部署到服务器上会报跨域问题，为什么会报错呢？因为编译打包后，前端页面成为了单独的静态资源，代理服务器devServer.proxy被抽离出去了。也就是说，devServer.proxy不会一起打包到dist文件夹下，所以相当于我们没有配置代理服务器！！
怎么解决呢？资源要被访问，那必须要有一个代理服务器来装载它。我们部署上线最常见的就是使用nginx进行反向代理，只需要修改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路径,即可解决部署项目前端网页请求接口报错原因