vue生产环境开发环境配置不同的接口地址

 

(1)分别设置不同的接口地址

     找到我们所搭建的vue脚手架如下两个文件（这两个文件就是针对生产环境和发布环境设置不同参数的文件）

     /config/dev.env.js

     /config/prod.env.js

      首先打开dev.env.js文件代码如下

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

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

     底下增加一项

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

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_ROOT: '"//127.0.0.1/api"'  //接口路径
})

 prod.env.js底下增加一项

module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"//www.baidu.com/api"'  //根据自己的项目接口
}

  然后我们可以在main.js文件设置vue原型

Vue.prototype.baseURL = process.env.API_ROOT;

 这样我们就配置完成了，可以在组件当中alert(this.baseURL),就可以看到弹出我们设置好的地址了