vue多环境配置及封装axios请求

多环境配置？？？

项目开发有三个不同的阶段，分别是开发阶段，测试阶段，生产阶段，三个阶段对应不同的项目开发环境，也对应要访问不同的接口地址，再根据不同的接口地址访问到对应的数据。所以要进行多环境变量配置。

准备工作：使用vue-cli3.0搭建项目

1.在根目录新建两个文件：.env.prod 与 .env.alpha

.env.prod 文件中：（表示设置生产环境变量）

.env.alpha文件中：（表示设置测试环境变量）

2.在根目录新建文件vue.config.js 进行修改vue的配置

module.exports={

  //publicPath：配置存放路径，若是生产环境则打包到根路径中aaaa的文件中，否则打包到根路径中（一般公司会将一个项目的代码放到服务器的一个文件中，如放在aaaa中）

  publicPath: process.env.NODE_ENV === 'production' ? '/aaaa/' : '/',



  lintOnSave: process.env.NODE_ENV !== 'production',

  productionSourceMap: false,

  //打包后的文件输出文件到dist文件中

  outputDir: 'dist',

...其他配置

}

3.在axios.js中配置axios请求，并导出axios配置（axios配置是对请求接口数据进行拦截或处理，请求成功就可以获取到数据）

import axios from 'axios'

import router from '../router'

import auth from '../utils/auth'

import { Message } from 'view-design'



const dev = 'http://本地开发环境接口地址/'

const alp = 'http://测试接口地址/'

const pro = 'https://正式环境接口地址/'



//创建一个axios实例

const instance = axios.create({

  baseURL: process.env.NODE_ENV === 'development' ? dev : process.env.VUE_APP_BUILD === 'production' ? pro : alp,

  timeout: 5000



})

axios.defaults.retry = 4

axios.defaults.retryDelay = 1000



//请求拦截器

instance.interceptors.request.use(

  config => {

    const token = auth.getUser().token

//配置请求头，携带token发送请求

    config.url = ~config.url.indexOf('?')

      ? `${config.url}&token=${token}`

      : config.url = ~config.url.indexOf('/login') ? config.url : `${config.url}?token=${token}`

    return config

  }, err => {

    return Promise.reject(err)

  })



//响应拦截器

instance.interceptors.response.use(

  res => {

    return res.data



  }

  , error => {



    let config = error.config

    if (error && error.response) {

      switch (error.response.status) {

        case 400:

          error.message = '错误请求'

          break

        case 401:

          error.message = '授权失败，请重新登录'

          auth.delUser()

          router.push('/login')

          break

        case 403:

          auth.delUser()

          error.message = '拒绝访问'

          break

        case 404:

          error.message = '请求错误,未找到该资源'

          break

        case 405:

          error.message = '请求方法未允许'

          break

        case 408:

          error.message = '请求超时'

          break

        case 500:

          error.message = '服务器端出错'

          break

        case 501:

          error.message = '网络未实现'

          break

        case 502:

          error.message = '网络错误'

          break

        case 503:

          error.message = '服务不可用'

          break

        //超时处理

        case 504:

          if (!config || !config.retry) return Promise.reject(error)

          config.__retryCount = config.__retryCount || 0

          if (config.__retryCount >= config.retry) {

            return Promise.reject(error)

          }

          config.__retryCount += 1

          var backoff = new Promise(function (resolve) {

            setTimeout(function () {

              resolve()

            }, config.retryDelay || 1)

          })

          error.message = '网络超时'

          return backoff.then(function () {

            return axios(config)

          })

        case 505:

          error.message = 'http版本不支持该请求'

          break

        default:

          error.message = `连接错误${error.response.status}`

      }

    }

    // 若有错误，返回错误信息

    Message.error(error.message)

    return Promise.reject(error.message)

  })

//导出axios实例

export default instance

4.在req.js中封装调用接口方法，举例如下：

import instance from '../utils/axios'

// 登陆

export const login = (data) => {

  return instance(

    {

      url: '/接口地址',

      method: 'post',

      data

    })

}

// 获取信息

export const getUser = (params) => {

  return instance(

    {

      url: '/接口地址',

      method: 'get',

      params

    })

}

5.在router.js中使用导航守卫对路由进行拦截（导航守卫是对每次页面跳转前进行拦截处理，判断是否可以跳转成功）

router.beforeEach((to, from, next) => {

  const user = auth.getUser()

  if (to.path === '/login') {

    auth.delUser()

    next()

  }

  if (to.path !== '/login' && !user.token) {

    return next('/login')

  }

  next()

})

【注意：登陆成功后需要把token保存在本地，此处省略...(使用localStorage/sessionStorage均可)】

6.在package.json文件script中添加运行命令

//打包到生产环境时，运行 npm  run build

"build": "vue-cli-service build --mode prod",

//打包到测试环境时，运行  npm run build:alpha

"build:alpha": "vue-cli-service build --mode alpha",

以上就是一个大致的多环境配置过程，写的比较粗糙可能存在错误，欢迎多多指正~