vue 项目整体配置

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import promise from 'es6-promise'
import {mockUrl, devUrl} from '../public/static-assets/config/api'
import {baseFilters} from '../public/static-assets/config/base-filters'
import formats from '../public/static-assets/config/formats'
import stateCodesList from '../public/static-assets/config/state-codes-list'

//import 'element-ui/lib/theme-chalk/index.css'
import 'element-ui/theme/index.css'


Vue.use(Badge);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Button);
Vue.use(Row);
Vue.use(Col);


const runEnv = "dev"; //测试环境： "mock"  "dev"

promise.polyfill();
Vue.config.productionTip = false;

Vue.prototype.$baseUrl = (function () {
  if(runEnv === "mock"){
    return mockUrl;
  }else if(runEnv === "dev"){
    return devUrl;
  }
})();


/*
* 约定状态代码
*/
Vue.prototype.$stateCodesList = stateCodesList;
/*
* 时间格式转换
*/
Vue.prototype.$formats = formats;
/*
* 基础filter
*/
Vue.prototype.$baseFilters = baseFilters;

let token = sessionStorage.getItem('token')
const HTTP = axios.create({
    //baseURL: baseUrl,
    timeout: 6000,
    headers: {
        'X-Custom-Header': 'foobar',
        common:{
            'Authorization' :'Bearer ' + token,
        },
        post:{
            'Content-Type' : "application/x-www-form-urlencoded",
        }
    }
});

if(runEnv === "dev"){
    router.beforeEach((to, from, next) => {
        // 判断该路由是否需要登录权限
        if (to.meta.requireAuth) {
            // 通过获取当前的token是否存在
            if (token !== 'null') {
                next()
            } else {
                alert('token已失效，请重新登录！')
                window.location.href = window.location.host
            }
        } else {
            next()
        }
    })

    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();


    HTTP.interceptors.response.use(
        response => {
            return response;
        },
        error => {
            console.log(error)
            if (error.response.status === 401) {
                source.cancel(); // 取消其他正在进行的请求
                alert('未授权，请重新登录！');
                sessionStorage.removeItem('token')
                window.location.href = '/'
            } else if (error.response.status === 404) {
                //alert('404，接口未找到！')
            } else if (error.response.status === 500) {
                //alert('500，应用程序错误！')
            }
            if (axios.isCancel(error)) { // 取消请求的情况下，终端Promise调用链
                return new Promise(() => {});
            } else {
                return Promise.reject(error);
            }
        }
    );
}



// 如果在mock环境和get请求时，自动添加扩展名，为方便dev和mock同步测试
HTTP.interceptors.request.use(config => {
    let url = config.url;
        if ((config.method === 'get' && runEnv === 'mock') || url.indexOf("/static-assets/code" ) !== -1) {
            if(url.indexOf("?") !== -1){
                config.url = url.split("?")[0]+'.json?'+url.split("?")[1];
            }else{
                config.url = url+'.json';
            }

        }

        return config
    }
);

Vue.prototype.$HTTP = HTTP;



new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

api 来源切换

public/statice-assets/config/api.js

const apiHostDev = "http://192.168.0.102:7777/api/"; //dev 数据路径
const apiHostLocal = "/static-assets/";  //mock 数据路径
let mockUrl = {
    global: apiHostLocal + 'api/global', //全局
    authenticate: apiHostLocal + 'api/global/authenticate', //鉴权
    project: apiHostLocal + 'api/project', //项目
},
    devUrl = {
        authenticate: apiHostDev + 'global/authenticate', //鉴权
        common: apiHostDev + 'global/common', //公用
    }



export {mockUrl,devUrl}

根据状态码改变状态名称的全局方法，用法，this.$baseFilters.politicsStatusFile(xxx)

public/statice-assets/config/base-filters.js

import stateCodesList from './state-codes-list'

let baseFilters = {
//状态判断
    politicsStatusFile:function(value){
        var state = '';
        switch (value) {
            case stateCodesList.politicsStatusMasses:
                state = '群众';
                break;
            case stateCodesList.politicsStatusParty:
                state = '党员';
                break;

            default:
        }
        return state;
    },
    //文件后缀名
    fileExtensionFilter: function (path) {
        if (!path) return '';
        var arr = path.split('.'),
            extension = arr[arr.length-1].toLowerCase(),
            extensionName = '';
        switch (extension) {
            case 'doc':
            case 'docx':
                extensionName = 'doc';
                break;
            case 'excel':
                extensionName = 'excel';
                break;
            case 'pdf':
                extensionName = 'pdf';
                break;
            case 'zip':
            case 'rar':
                extensionName = 'zip';
                break;
            default:
        }
        return extensionName;
    },
    //手机验证
    validatePhone:function(rule, value, callback){
        if (value === '') {
            callback(new Error('请输入证明人电话'));
        } else{
            if(!(/^1[3456789]\d{9}$/.test(value))) {
                callback(new Error('请输入正确的手机号'));
            }else{
                callback();
            }

        }
    }
};


export {baseFilters};

状态码对应 this.$stateCodesList.accountNormal

public/statice-assets/config/state-codes-list.js

const stateCodesList = {
    //基本信息相关
    accountNormal: 1,//正常
    accountForbidden: 2,//禁用
};
export default stateCodesList;

时间格式化
this.$formats.YYYYMMDDByHoriLine(1594690376049)
// 2020-07-14

public/statice-assets/config/formats.js

import moment from "moment"

let formats = {

    //短横线分割 YYYY-MM-DD
    YYYYMMDDByHoriLine:function(time){
        return moment(time).format('YYYY-MM-DD')
    },
    //短横线分割 YYYY-MM-DD HH:mm
    YYYYMMDDHHmmByHoriLine:function(time){
        return moment(time).format('YYYY-MM-DD HH:mm')
    },
    //中文字符分割 YYYY年MM月DD日
    YYYYMMDDByCharacters:function(time){
        return moment(time).format('YYYY年MM月DD日')
    },
    //中文字符分割 YYYY年MM月DD日 HH时mm分
    YYYYMMDDHHmmByCharacters:function(time){
        return moment(time).format('YYYY年MM月DD日 HH时mm分')
    },
    //中文字符分割 YYYY年MM月
    YYYYMMByCharacters:function(time){
        return moment(time).format('YYYY年M月')
    },
    //中文字符分割 YYYY年MM月DD日 HH:mm
    YYYYMMDDHHmmByCharactersHoriLine:function(time){
    return moment(time).format('YYYY年MM月DD日 HH:mm')
}

};
export default formats;