vue-cli axios封装以及环境变量配置

一.基于promise用于浏览器和node.js的http客户端

1.npm安装

npm install axios

2.在项目src文件下新建request文件夹  新建axios.js文件 封装axios

/**axios封装 
* 请求拦截、相应拦截、错误统一处理 
*/import axios from 'axios';

// 环境的切换 环境域名配置
if (process.env.NODE_ENV == 'development') {  
axios.defaults.baseURL = 'https://promotion.merdolacloud.com/test'; 
 // axios.defaults.baseURL = 'https://promotion.merdolacloud.com/dev';
} else if (process.env.NODE_ENV == 'testing') {  
axios.defaults.baseURL = 'https://promotion.merdolacloud.com/test'; 
} else if (process.env.NODE_ENV == 'production') {  
axios.defaults.baseURL = 'https://promotion.merdolacloud.com/prod';
}

// 请求超时时间
axios.defaults.timeout = 10000;

// 请求拦截器
axios.interceptors.request.use(  config => {   
 // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
    const token = localStorage.getItem("token"); 
token && ( config.headers['token'] =token);    
return config;  },  error => {   
 return Promise.error(error);  
})
// 响应拦截器axios.interceptors.response.use(  response => {    
if (response.status === 200) {     
 return Promise.resolve(response);   
 } else {    
  return Promise.reject(response);   
 } 
 },  
// 服务器状态码不是200的情况  
error => {   
 if (error.response.status) {     
 switch (error.response.status) {      
  // 401: 未登录       
 // 未登录则跳转登录页面，并携带当前页面的路径       
 // 在登录成功后返回当前页面，这一步需要在登录页操作。       
 case 401:        
  break;        
// 403 token过期      
  // 登录过期对用户进行提示      
  // 清除本地token和清空vuex中token对象     
   // 跳转登录页面     
   case 403:      
    // 清除token      
    // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面    
      break;     
   // 404请求不存在   
     case 502:     
     break;     
   // 其他错误，直接抛出错误提示    
    default:     
 }     
 return Promise.reject(error.response);   
 } 
 });

/** * get方法，对应get请求 
* @param {String} url [请求的url地址] 
* @param {Object} params [请求时携带的参数] 
*/
export function get(url, params){ 
 return new Promise((resolve, reject) =>{  
  axios.get(url, {     
 params: params 
   })     
 .then(res => {     
   resolve(res.data);    
  })      .catch(err => {      
  reject(err.data)    
  })  });}

/** * post方法，对应post请求 
* @param {String} url [请求的url地址] 
* @param {Object} params [请求时携带的参数] */
export function post(url, params) {  
return new Promise((resolve, reject) => {  
  axios.post(url, params)    
  .then(res => {      
  resolve(res.data);   
   })    
  .catch(err => {     
   reject(err.data)    
  }) 
 });
}

3.在项目src文件下新建request文件夹 新建api.js文件

import { get, post } from './axios'

// 登陆api
export const getSmsCode = p => post('/myd/sms/publicity/getSmsCode', p);
export const login = p => post('/myd/wechatCustomer/shopping/wxBindPhone', p);
export const getWxOpenInfo = p => post('/myd/wechat/pay/shopping/getWxOpenInfo', p);
export const verdictWxStatus = p => post('/myd/wechat/pay/shopping/verdictWxStatus', p);

// 首页
apiexport const publicityShopIndex = p => post('/myd/publicityShop/shopping/publicityShopIndex', p);

4.在组件页面使用axios

import {publicityShopIndex,getSmsCode } from '@/request/api';// 导入我们的api接口

调用方法

publicityShopIndex({  
shopId: localStorage.getItem('shopId'),  //请求参数
}).then(res => {
  console.log(res,data) //返回参数
})

二.vue项目环境变量配置 ，根据不同命令进行打包部署

1.安装cross-env

npm i --save-dev cross-env

2.修改环境下的参数

修改prod.env.js文件内容

'use strict'
module.exports = { 
 NODE_ENV: '"production"',  
EVN_CONFIG:'"prod"',  
API_ROOT:'"/apis/v1"'
}

修改test.env.js

'use strict'
module.exports = {  
NODE_ENV: '"testing"',  
EVN_CONFIG:'"test"', 
 API_ROOT:'"/test/apis/train"'
}

修改dev.env.js文件内容，dev环境如果要配置服务代理，API_ROOT前的api是配制的代理地址

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {  
NODE_ENV: '"development"',  
VN_CONFIG: '"dev"',  
API_ROOT: '"api/apis/v1"'
})

3.修改package.json文件

对package.json文件里scripts进行定制，添加几个环境打包过程

"scripts": {  
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",  
"start": "npm run dev",  
"unit": "jest --config test/unit/jest.conf.js --coverage",  
"e2e": "node test/e2e/runner.js",  
"test": "npm run unit && npm run e2e",  
"build": "node build/build.js",  
"build:test": "cross-env NODE_ENV=production env_config=test node build/build.js", 
 "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"},

添加build:test build:prod

4.修改config/index.js

修改config/index.js中build参数，参数会在build/webpackage.prod.conf.js使用

build: { 
 // Template for index.html  
// 添加test pre prod 三处环境的配制  
prodEnv: require('./prod.env'),  
testEnv: require('./test.env'),

5.在webpack.prod.conf.js中构建环境参数

修改webpack.prod.conf.js，修改env常量生产方式

//注释代码
// const env = process.env.NODE_ENV === 'testing'
//   ? require('../config/test.env')
//   : require('../config/prod.env')

const env = config.build[process.env.env_config+'Env']

6.修改build/build.js

删除process.env.NODE_ENV的赋值。修改spinner的定义 

// 注释掉的代码
// process.env.NODE_ENV = 'production'
const ora = require('ora')const rm = require('rimraf')const path = require('path')const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')

// const spinner = ora('building for production...')
// spinner.start()

//修改spinner的定义
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()

7.大功告成

运行npm run build:test 打包测试环境

运行npm run build:prod 打包生产环境