vue项目打包后修改配置

前言

在使用vue.js开发前端项目时，再结合webpack搞起各种依赖、各种插件进行开发，无疑给前端开发带来了很多便捷，就在解决跨域这个问题上，相信众多用vue.js的前端同僚们同我一样尝到了甜头，开发环境全靠proxyTable一通配置简直不要太酸爽。还不明所以然的新手们可能还没搞清我说的是什么，就是下面这几行配置:

proxyTable: {'/api': {target: 'http://113.113.113.113:5000', //假的接口地址哈changeOrigin: true,pathRewrite: {'^/api': ''}},

我们的跨域竟然就这样完美的解决了，然后就开始愉快的请求后端的接口啦！！

回到正题

具体场景：公司的一个h5项目是部署在客户端的，但是部署后出现bug了，由于多人协同开发且赶进度竟然是打包后因为css的问题多个页面布局乱了，但是开发环境并没有问题啊，怎么打完包样式就乱了？那就打开dist下的index.html看看呗，复现一下bug，想都不用想，页面没数据怎么复现，再去造一套假数据？作为一个不喜欢这样折腾的人必然是不想做这种事情的。

就不劳烦后端了，咱自己解决！

nginx还是要会一些些的，自己配置一下，分分钟解决，哈哈！

server {listen       8082;server_name  127.0.0.1;  //咱自己nginx服务器地址#charset koi8-r;#access_log  logs/host.access.log  main;location / {root   html;index  index.html index.htm;}location /app-api {rewrite  ^.+app-api/?(.*)$ /$1 break;include  uwsgi_params;proxy_pass   http://113.113.113.113:5001/;  //后端接口地址//关键部分startadd_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,token';//关键部分end//以下配置参见nginx配置文档哈#Proxy Settingsproxy_redirect     off;proxy_set_header   Host             $host;proxy_set_header   X-Real-IP        $remote_addr;proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;proxy_set_header   Connection       close;proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;proxy_max_temp_file_size 0;proxy_connect_timeout      90;proxy_send_timeout         90;proxy_read_timeout         90;proxy_buffer_size          4k;proxy_buffers              4 32k;proxy_busy_buffers_size    64k;proxy_temp_file_write_size 64k;}
}

目的是把后端接口用nginx再代理一遍，咱自己用nginx间接允许一下跨域请求！

start nginx //在nginx目录启动服务

通常我们会做一个统一的管理接口的js文件，如下形式

var BASE_URL = '/api';
var isPro = process.env.NODE_ENV === 'production'
if(isPro){BASE_URL= 'http://113.113.113.113:5000',  //线上或者测试地址//BASE_URL= 'http://127.0.0.1:8020',  //nginx代理地址//当我们需要打包后依然能正常调接口的时候用这个
}
const UrlConfig = {getToken:BASE_URL + "某接口"
}
export default {UrlConfig
};

至此，就把打包后接口跨域的问题优雅的解决啦。