vue_cli3中axios封装、配置不同开发环境变量

项目开发中，一般都会有开发环境、测试环境、预生产环境、生产环境等多个环境，所以项目在打包时我们就会调用不同环境的接口，此时我们就要通过配置变量来解决这一问题。

一、配置不同环境变量

下面以开发、测试、预生产、生产这4个环境为例。

1、在项目根目录创建4个不同的文件，代表不同的环境配置

开发环境： .env.development
测试环境： .env.qa
预生产环境： .env.stage
生产环境： .env.production

2、在不同文件配置变量

.env.development

NODE_ENV = 'development'
VUE_APP_BASE_URL = 'http://www.development.api'

.env.qa

NODE_ENV = 'qa'
VUE_APP_BASE_URL = 'http://www.qa.api'

.env.stage

NODE_ENV = 'stage'
VUE_APP_BASE_URL = 'http://www.stage.api'

.env.production

NODE_ENV = 'production'
VUE_APP_BASE_URL = 'http://www.production.api'

注意：
1、这里声明的NODE_ENV = 'development' 就表示开发环境
2、除了 baseUrl 和 NODE_ENV ,其他环境变量使用 VUE_APP 开头 ,比如VUE_APP_XXX
3、然后我们可以通过process.env.VUE_APP_XXX来取到定义好的环境变量
4、下文在封装axios的js文件中赋值baseUrl的时候就会通过环境变量取值

3、配置打包命令package.json

  "scripts": {
    "dev": "vue-cli-service serve",
    "dev-qa": "vue-cli-service serve --mode qa",
    "dev-stage": "vue-cli-service serve --mode stage",
    "dev-product": "vue-cli-service serve --mode production",
    "build-qa": "vue-cli-service build --mode qa",
    "build-stage": "vue-cli-service build --mode stage",
    "build-product": "vue-cli-service build --mode production"
  },

说明：
npm run dev表示：vue-cli-service serve会默认执行.env.development文件
--mode qa来指定执行.env.qa文件
--mode stage来指定执行.env.stage文件
--mode production来指定执行.env.production文件

二、axios二次封装

1、创建`request.js`文件

在src下创建一个utils文件夹，用来放一些工具类型的文件，首先在里面创建一个用来封装axios的文件request，当然文件名自定义

//src/utils/request.js
import axios from 'axios'

// 创建 axios 实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL, // url = base url + request url
  timeout: 10000, // request timeout
})

//  请求拦截器
service.interceptors.request.use(
  (config) => {
    config.headers['Content-Type'] = 'application/json;charset=UTF-8'
    config.headers['Accept'] = 'application/json'
    config.headers['Request-From'] = 'mobile'
    let token = sessionStorage.getItem('loginToken') || null
    if (token) {
      // 如果token不为null，否则传token给后台
      config.headers['Token'] = token
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    const res = response.data
    //届时根据后端返回success或者code值判断
    if (res.success === true) {
      return res
    } else {
      return res
    }
  },
  (error) => {
    //响应错误
    return Promise.reject(error)
  }
)

export default service

注：文件中的baseURL: process.env.VUE_APP_BASE_URL则就是根据不同环境取不同的接口地址

2、创建`common.js`文件

在src下创建一个api文件夹，用来放一些接口的文件,当接口过多的时候可以分类创建接口文件，目前我们先创建一个公共的文件common.js,然后引入刚才封装的request.js文件

//src/api/common.js
import request from '@/utils/request'

/**
 * POST 方法 与 GET方法  区别
 *
 * post==> data: obj
 * get==>params: obj
 *
 */
// 例如(post)：
 export function updateBook(obj) {
   return request({
     url: '/book/update',      // url = base url + request url
     method: 'post',
     data: obj,    //----------------->>>区别
   })
 }
// 例如(get)：
 export function getBookList(obj) {
   return request({
     url: '/book/list',      // url = base url + request url
     method: 'post',
     params: obj,    //----------------->>>区别
   })
}

3、页面中使用

<template>
  <div class="booktest"></div>
</template>
<script>
import { getBookList, updateBook } from '@/api/common'   //路径
export default {
  name: '',
  data() {
    return {}
  },
  methods: {
    //get方式
    getBookList() {
      let params = {
        userName: '张三',
      }
      getBookList(params).then((res) => {
        //返回值
      })
    },
    //post方式
    updateBook() {
      let params = {
        bookId: 1,
      }
      updateBook(params).then((res) => {
        //返回值
      })
    },
  },
}
</script>

三、vue.config.js配置

module.exports = {
    // 选项...
    /* 部署应用包的基本URL */
    publicPath: './',

    /* 当运行 vue-cli-service build 时生成的生产环境构建文件的目录 defalut: dist */
     outputDir: './dist',
    //可根据不同环境打包不同地址
    //outputDir: process.env.NODE_ENV == 'production' ?
       // '../../../../dist-mobile/product/course' : process.env.NODE_ENV == 'stage' ?
       // '../../../../dist-mobile/stage/course' : process.env.NODE_ENV == 'qa' ?
        //'../../../../dist-mobile/qa/course' : '../../../../dist-mobile/run/course',

    /* 放置生成的静态文件目录（js css img） */
    assetsDir: 'static',

    /* 指定生成的index.html 输出路径 相对 default: index.html */
    indexPath: 'index.html',

    /* 指定生成文件名中包含hash default: true */
    filenameHashing: true,

    // 所有 webpack-dev-server 的选项都支持。
    devServer: {
        host: '0.0.0.0',
        port: 8888, // 端口号
        https: false,
        open: false, //配置自动启动浏览器

        // 配置多个代理
        proxy: {
            '/api': {
                target: process.env.VUE_APP_BASE_URL, // 代理服务器路径
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '', // 去掉接口地址中的api字符串
                },
            },
        },
    },
}

这样就完成了根据不同项目启动命令,来自动配置不同环境,匹配指定接口地址了
例如：
启动npm run dev-qa,
执行vue-cli-service serve --mode qa,
根据--mode qa,
查找.env.qa文件 ,
获得环境NODE_ENV为:qa环境, 接口地址VUE_APP_BASE_URL为:http://www.qa.api
所以封装的axios中的baseUrl地址就是http://www.qa.api
调用后的地址就是:http://www.qa.api/book/list
大概就是这么个流程，
接下来就可以愉快的开发了.

文件目录