Vuecli开发笔记二接口调用、配置全局变量

我做的一个项目，本身是没用任何框架，纯手写的前端及数据交互，项目已经完结。最近学Vue，于是借用这个项目，改装成vue项目。

（一）接口问题：使用axios的调用方法，proxyTable解决开发环境跨域，遗憾的是条件限制，只能用jsonp方法

接口是jsonp解决的跨域问题。改装的时候，初期安装的axios，调用接口。

安装axios，使用它的get方法，另外配置config/index.js中的proxyTable，解决跨域问题，但只能解决开发环境下的跨域问题

proxyTable: {
  '/WebService': {
    target: 'http://139.196.7.54',
    pathRewrite: {
      '^/WebService': '/WebService'
    }
  }
}

在入口js文件main.js中引入axios，然后将axios写在了Vue方法的原型上

Vue.prototype.$http = axios

 调用

this.$http.get(`/WebService/GPSAPPWebService.asmx/VehicleInfoCount?orgId=${userData.orgId}`).then(m => {
  let data = eval(m.data)
  _this.count = data.data.Count
  _this.onlineCount = data.data.OnlineCount
})

（二） 配置全局变量

后来发现，打包的文件接口地址有问题，地址还是相对路径，才知道proxyTable只对开发环境有用，于是开始尝试配置全局变量

根据config/dev.env.js及config/prod.env.js的文件配置，

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

module.exports = {
  NODE_ENV: '"production"'
}

另外vue-cli在build/webpack.dev.conf.js及build/webpack.prod.conf.js中对process.env本身有定义（如下），DefinePlugin定义内容可以全局使用

//build/webpack.dev.conf.js
new webpack.DefinePlugin({
  'process.env': config.dev.env
})

//build/webpack.prod.conf.js
new webpack.DefinePlugin({
  'process.env': config.build.env
})

在main.js文件中根据配置的参数的情况，更改api接口：生产环境用的139的地址

if (process.env.NODE_ENV !== 'development') {
  Vue.prototype.URL_PREFIX = 'http://139.196.7.54'
} else {
  Vue.prototype.URL_PREFIX = ''
}

调用的时候

this.$http.get(`${this.URL_PREFIX}/WebService/GPSAPPWebService.asmx/VehicleInfoCount?orgId=${userData.orgId}`).then(m => {
    let data = eval(m.data)
    _this.count = data.data.Count
    _this.onlineCount = data.data.OnlineCount
})

打包出来后，发现get方法还是有问题，因为接口是约定的是jsop格式，这里虽然开发环境解决了，并且设置环境变量，使生产环境接口地址请求正确，但是还是访问不到，悲了个催

（三）接口问题之二：转用jsonp：https://github.com/mzabriskie/axios/blob/master/COOKBOOK.md#jsonp

悲了个催，当时用axios百度时说没有jsonp方法，所以我就凑合用用了，这次一百度，发现有了

npm安装jsonp，并使用就行。于是接口全部改了

main.js引入及原型链挂载

import jsonp from 'jsonp'
Vue.prototype.jsonp = jsonp

项目中使用

this.jsonp(`${this.URL_PREFIX}/WebService/GPSAPPWebService.asmx/VehicleInfoCount?orgId=${userData.orgId}`, null, (err, m) => {
  if (err) {
    console.error(err.message)
  } else {
    console.log(m)
    let data = m.data
    _this.count = data.Count
    _this.onlineCount = data.OnlineCount
  }
})

又想到这个时候，接口就访问的是一致的了，那就不需要配置什么环境变量了，于是就把上面main.js中根据process.env.NODE_ENV设置不同的URL_PREFIX改成了如下

Vue.prototype.URL_PREFIX = 'http://139.196.7.54'

于是开发环境和生产环境都好了。。。。真是弯弯绕

遇到过这种报错，其实是端口号被占用了