vuecli2框架介绍（三）如何区分线上和线下环境

第三章：如何区分线上和线下环境

不知道你发现了没有

---

vuecli中，运行npm run dev是执行当前环境，npm run build是打包当前环境。
但是问题来了，我们直接打包出来的是线上环境中的页面，这肯定是不行的。

这里介绍一个简单的方法。
就是借助axios插件。如果说，你不使用vue全家桶中的axios，你用原生的ajax的话，
你就需要去修改webpack的配置，但是，不同版本的webpack可能配置起来都不太一样，更要命的是，你每次多了一个网址，你就要从里面填一套配置，非常的麻烦。

第一步：修改config文件夹下的prod.env.js

---

'use strict'
module.exports = {
  NODE_ENV: '"production"',
    API_PATH_TEST:'"//127.0.0.1:3002/"',
    API_PATH_PROD:'"//www.dangyunlong.com"'
}

test是我的本地端口地址
prod是我的线上端口地址

第二步：修改main.js

---

//配置axios区别线上和测试环境
if(location.hostname === 'localhost'){
    axios.defaults.baseURL = process.env.API_PATH_TEST
}else if (location.hostname === 'www.dangyunlong.com'){
    axios.defaults.baseURL = process.env.API_PATH_PROD
}

这样它根据你url上面的地址不同，会自动切换api调用的端口。其实说简单点，就是利用了，webpack中nodeenv是个常量，webpack这个东西永远存在
然后判断一下你当前url的地址，再利用axios去切换。

注意：你要使用这个方法必须先再项目中安装axios。如果你没有axios你就只能去修改webpack配置了。
那就跟上进生项目一样，打包到测试用npm build test。

完成后，你再localhost域名上的请求会自动转到你本地上去。

ajax的请求地址已经改过来了