Vue 跨域处理和打包环境配置

在前端开发过程中，总会遇到跨域这个问题，一般如果用通常的jquery的话，配置跨域一个jsonp就行了，如果是vue，则需要配置代理了，项目中找到config下的index文件，在dev下增加代码，如下图

因为目前项目有三个接口，我就配了三个地址，那么相应的请求地址也就是：

this.http.post('/read',data).then(res=>{}).catch(err=>{});
this.http.post('/write',data).then(res=>{}).catch(err=>{});
this.http.post('/commt',data).then(res=>{}).catch(err=>{});

this.http是我在main.js挂载在原型上面的方法，

import axios from 'axios'；Vue.prototype.http = axios;

这样，一个简单的跨域就完成了，注意，这个方法只适用于开发环境。

既然开发环境配置好了，那么线上环境也要配置的，如果只有一个接口，而且做了统一的接口管理，相当于新建一个js文件，把所有请求都写入里面，并抛出方法，这样更好的管理接口（很不幸，接手的时候这个项目并没有这样做），如果这样做，则简单的就可以配置开发环境的请求和线上环境的请求了

let base = process.env.NODE_ENV === 'production' ?'线上环境的请求地址':'开发环境的请求地址';

//请求方式
this.http.post(base,data).then(res=>{}).catch(err=>{});

除了这种方法外，还有一种方法可以配置线上环境：

首先，修改config下面的dev.env.js文件

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
 
  write:' "/write" ',
  read:' "/read" ',
  commt:' "/commt" '
})
//因为是三个接口，我配置了三个，（'/write','/read','/commt'这样写是因为我本地跨域设置代理，如果不需要跨域的写上实际的接口即可）注意的的是，单引号里面必须是双引号包着才能生效。

然后，再次修改config下面的pro.env.js文件

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  write:' "http://devwrite..." ',
  read:' "http://devread...." ',
  commt:' "https://devcomm..." '
}

这样就已经是完成了，用axios发送请求

 this.http.post(process.env.write, datas).then(res=>{}).catch(err=>{});
 this.http.post(process.env.read, datas).then(res=>{}).catch(err=>{});
 this.http.post(process.env.commt, datas).then(res=>{}).catch(err=>{});

这样，简单的配置就完成了