Vue项目 测试、发布root地址配置

说明

基本上所有的项目，在测试的时候和正式发布的时候根地址是不一样的;
测试环境连接测试后台方便测试;
正式环境连接正式后台地址，这已经不是新鲜的事了;


原来我们是手动去修改地址，在每次切换环境的时候;
下面说说VUE项目中怎样将测试环境和正式的地址提前配置好，防止忘记修改地址导致发布失败;

利用的WebPack给生产环境和正式环境配置不同地址

项目目录中有配置文件夹;
里面找到prod.env.js文件和dev.env.js文件，没有则创建;


里面具体内容如下

pro.env.js：

module.exports = {
  NODE_ENV: '"production"'
     ,API_ROOT: '"你正式发布的地址"'
}

dev.env.js：

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

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
,API_ROOT: '"你测试环境地址"'
})

配置文件夹下index.js文件中：

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
  build: {
    env: require('./prod.env'),
    // ....... //
  },
  dev: {
    env: require('./dev.env'),
    // ....... //
  }
}

省略下面其他代码：
env分别指定文件和其他的一些配置如端口号等配置;

调用

目前我们VUE的几个项目都是使用的HTTP来进行网络请求;


下面看下调用的例子：

import axios from 'axios'
import router from '../router'


axios.defaults.baseURL = process.env.API_ROOT
axios.defaults.withCredentials = true

//http response拦截器，如果返回401，返回登录页面

axios.interceptors.response.use(
	response => {
		return response;
	},
	error =>{
		if(error.response){
			switch (error.response.status) {
				case 401:
					router.push({path:'/'});
					break;
				default:
					break;
			}
		}
		return Promise.reject(error);
	}
);

export default axios;

主要调用代码：

axios.defaults.baseURL = process.env.API_ROOT

这样在你不同的环境中打包或者运行会取到不同的地址;