说明


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


原来我们是手动去修改地址,在每次切换环境的时候;
下面说说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

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



Logo

前往低代码交流专区

更多推荐