spring boot + Vue + iView前后端分离架构(Mac版) -- (六)开发、生产环境动态切换

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登录，正常跳转到后台管理系统首页即可。