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

我做的一个项目，本身是没用任何框架，纯手写的前端及数据交互，项目已经完结。最近学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'

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

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