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'

 

於是開發環境和生產環境都好了。。。。真是彎彎繞

遇到過這種報錯，其實是端口號被占用了