spring boot + Vue + iView前后端分离架构(Mac版) – (六)开发、生产环境动态切换
一、前端环境配置
在项目开发中,经常需要切换环境,在开发环境、测试环境配置不同的项目运行信息。为了实现开发、生产环境的动态切换,很有必要快速动态地指定环境。
在前端项目hep-admin-web
的src-->config
目录下创建四个文件:prod.js
(正式环境的配置)、env.js
(当前启动的环境)、dev.js
(测试环境配置)、run.config.js
(动态获取当前环境的信息),内容分别如下:
prod.js
export const runProdConfig = {
baseUrl : 'http://www.huerpu.com:80',
imgUrl : 'http://www.huerpu.com:80/img'
};
env.js
export default "development";
dev.js
export const runDevConfig = {
baseUrl : 'http://127.0.0.1:80',
imgUrl : 'http://127.0.0.1:80/img'
};
run.config.js
import {runDevConfig} from './dev';
import {runProdConfig} from './prod';
import env from './env';
export default {
/**
* 根据启动项env来获取配置文件
*/
runConfig:env === 'development' ? runDevConfig : runProdConfig,
}
注意:开发环境hep-admin-web-core
中配置的端口为80,所以在开发环境端口也为80。
如果需要切换环境只需要修改development
为其他值就可以了,若需要扩展则自行在run.config.js
去扩展。
二、动态配置axios的请求地址
开发环境对应的后端地址和生产环境的后端地址是不同的,因此需要动态的快速切换。在原来创建的前端项目的axios.js
进行修改,首先导入run.config
,其次创建实例时替换baseUrl
为变量config.runConfig.baseUrl
。
axios.js
import Axios from 'axios';
import {Message} from 'iview';
import config from '../config/run.config';
class httpRequest {
constructor() {
this.options = {
method: '',
url: ''
};
// 存储请求队列
this.queue = {};
}
// 销毁请求实例
destroy(url) {
delete this.queue[url];
const queue = Object.keys(this.queue);
return queue.length;
}
// 请求拦截
interceptors(instance, url) {
// 添加请求拦截器
instance.interceptors.request.use(config => {
// 在往后端发送请求的时候,还没有发送之前的处理,
// 比如我们需要往我们的请求的header里面添加一些token或者其他信息的时候可以在此处进行相应的操作处理
console.log('请求拦截')
return config
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
})
// 添加响应拦截器
instance.interceptors.response.use((res) => {
// 已经完成了和后端的交互,此处已经获取到了后端返回的请求了,
// 可以在此处做权限的验证拦截,比如用户非法登录的时候可以在此处重定向到登录页面
let {data} = res;
console.log('响应拦截'+res)
return data;
}, (error) => {
Message.error('服务内部错误');
// 对响应错误做点什么
return Promise.reject(error);
})
}
// 创建实例
create() {
let conf = {
// 远程请求的服务的地址,动态获取,此处为第七章改造的关键点
baseURL: config.runConfig.baseUrl,
// 超时时间
timeout: 5000,
headers: {
// 设置前端的跨域
'Access-Control-Allow-Origin': '*',
// 数据的提交方式为form的方式提交,若需要使用json的模式提交则将Content-Type值改为如下
// application/json; charset=utf-8
'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
'X-URL-PATH': location.pathname
}
};
return Axios.create(conf);
}
// 请求实例
request(options) {
let instance = this.create();
this.interceptors(instance, options.url);
options = Object.assign({}, options);
this.queue[options.url] = instance;
return instance(options);
}
}
export default httpRequest;
三、验证
启动项目,按照之前逻辑admin/123456
登录,正常跳转到后台管理系统首页即可。