关于vuecli3配合axios和vant，做开发环境和生产环境切换

1.脚手架创建项目

vue create test-app

2.安装axios 和 vant

npm instaill axios vant --save

3.进入项目根目录新建两个文件

.env.development    (开发环境)
.env.production        (测试环境)

.env.development   {
	/*  文件中的内容主要是对开发环境和生产环境的请求接口路径做修改  */
		NODE_ENV = 'development'
		VUE_APP_API_URL = '/api'
}

.env.production {
	NODE_ENV = 'development'
	VUE_APP_API_URL = 'http://172.25.3.134:7085/IcaQywxServer/rest/api/conversation/findAllByCon'
}

tips：因为我们本地开发的时候会遇到跨域问题需要做反向代理，所以这里使用的api，

4.axios封装

1.新建request文件夹，request.js用做封装请求，api对所有的接口进行统一管理
request.js代码如下
import axios from 'axios'
import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据，
import Vue from 'vue'
import { Toast  } from 'vant' // element-ui 
// 创建axios实例
const request = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  timeout: 10000 // 请求超时时间                                   
})
function startLoading() {
  // 开始加载
  Toast.loading({
    message: '加载中...',
    forbidClick: true,
  });
}

function endLoading() {
  // 结束加载
  Toast.clear() 
}

// 添加request拦截器 
request.interceptors.request.use(config => {
	startLoading()
  return config
}, error => {
  Promise.reject(error)
})
// 添加respone拦截器
request.interceptors.response.use(
  response => {
    if (response.data.code != 0) {
      return Promise.reject(response)
    }
    return Promise.resolve(response.data.data)
  },
  error => {
		startLoading()
    if (error.response) {
      switch (error.response.status) {
        case 401:
          console.log(401)
          break;
        case 403:
          console.log(403)
          break;
        case 404:
          console.log(404)
          break;
        case 500:
          console.log(500)
          break;
      }
    }
    return Promise.reject(error.response)
  }
)

export default request

api.js文件代码如下
import request from './request'

/**
 *  @parms resquest 请求地址 例如：http://197.82.15.15:8088/request/...
 *  @param '/testIp'代表vue-cil中config，index.js中配置的代理
 */
export function getuserInfo(obj) {
   return request({
     url: '/yuni/user/setinfo',      
     method: 'post',
     data: obj,   
   })
 }
// 例如(get)：
 export function getBookList(obj) {
   return request({
     url: '/book/list',      
     method: 'post',
     params: obj,    
   })
}

tips:request请求中的baseurl：会自动判断你当前的运行环境是开发还是生产环境进行配置url 我们之前新建的哪两个文件，一个baseurl是 ‘/api’ ，还有一个是’http://172.25.3.134:7085…’, 如果是本地开发的话就采用development的baseurl ‘/api’ ，如果是生产环境就切换到 production的baseurl:’/…’,
5.如何切换开发环境和生产环境

package.json中  
"serve": "vue-cli-service serve",
 "production-serve": "vue-cli-service serve --mode production",

tips:因为你输入npm run serve的时候默认启动的就是开发环境的，所以做一个小小的配置

还有配置打正式环境和测试环境的build包 还没做一个详细的整理，希望各位大佬能够不吝赐教 ， 前端小菜鸡一枚