vue2接口环境配置

前言

vue项目开发，会经历本地测试、打包、生产过程，其中不同阶段需要调试的api接口环境不同，要根据具体来设置。其实主要就是两个方面，配置‘本地运行’和‘打包运行’的api接口环境。

vue2项目的配置

vue2项目根目录下的config文件就是配置环境的，
本地运行
config/dev.env.js文件在本地运行时读取的
打包运行
config/prod.env.js文件在执行打包命令时读取的

（1）创建文件src/utils/baseURL.js

module.exports={
    local:'我是本地环境',         //本地环境(一般是连接后端主机ip进行本地调试)
    development:'我是开发环境',   // 开发环境(一般是连接测试服务器ip地址)
    baseURL:'我是生产环境',       //生产环境(一般是线上正式发版的ip地址)
    otherUrl:'我是其他环境'       // 其他环境（其他请求ip地址）
}

（2）找到package.json，修改scripts属性对象

修改前

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

修改后

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "dev_test": "webpack-dev-server --inline --progress --env=test --config build/webpack.dev.conf.js",
    "dev_prod": "webpack-dev-server --inline --progress --env=prod --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

（3）修改config/dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
const URL = require('../src/utils/baseURL.js')
let params = process.argv[4]
let baseUrl = ''
let environment = null
switch(params){
  // 本地环境
  case '--config':
    environment = "'本地环境'"
    baseUrl = `"${URL.local}"`
    break
  // 开发环境
  case '--env=test':
    environment = "'开发环境'"
    baseUrl = `"${URL.development}"`
    break
  // 生产环境
  case '--env=prod':
    environment = "'生产环境'"
    baseUrl = `"${URL.baseURL}"`
    break
  // 其他
  default:
    environment = "'其他'"
    baseUrl = `"${URL.otherUrl}"` 
}
// 本地开发
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  baseUrl:baseUrl,
  local:true,
  environment:environment
})

（4）修改config/prod.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
const URL = require('../src/utils/baseURL.js')
let params = process.argv[2]
let baseUrl = ''
let environment = null
switch(params){
  // 本地环境
  case '--inline':
    environment = "'本地环境'"
    baseUrl = `"${URL.local}"`
    break
  // 开发环境
  case 'test':
    environment = "'开发环境'"
    baseUrl = `"${URL.development}"`
    break
  // 生产环境
  case 'prod':
    environment = "'生产环境'"
    baseUrl = `"${URL.baseURL}"`
    break
  // 其他
  default:
    environment = "'其他'"
    baseUrl = `"${URL.otherUrl}"` 
}
// 打包环境
module.exports = merge(prodEnv, {
  NODE_ENV: '"production"',
  baseUrl:baseUrl,
  local:false,
  environment:environment
})

（5）main.js获取环境并且注册挂载vue原型上

// 注册全局域名接口调用
Vue.prototype.$baseUrl = process.env.baseUrl
// 注册当前运行或者打包的是什么环境下的
Vue.prototype.$Environment = process.env.environment

完成以上

本地项目启动命令使用：npm run dev，npm run dev_test、npm run dev_prod

打包环境命令使用：npm run build，npm run build test、npm run build prod

提示：process.env.baseUrl和process.env.environment变量可以在任意页面和组件中使用和访问

console.log( process.env.environment) // 获取当前是什么开发环境

可以通过process.env.local 布尔值来判断当前是本地开发访问还是线上访问，可以对请求封装和反向代理做一些区别和逻辑

封装api请求

根据不同环境切换接口域名

// 配置请求基本信息(详见文档 | 这里只做了简单的配置)
// baseurl / 超时时间(5秒) / 
if(process.env.NODE_ENV=='development'&&process.env.environment=='本地环境'){
    axios.defaults.baseURL = '/my'
}else{
    axios.defaults.baseURL = process.env.baseUrl
}

utils文件夹下创建http.js

// axios
import axios from 'axios'
// 获取token
var token = localStorage.getItem('Token')
// 配置请求基本信息(详见文档 | 这里只做了简单的配置)
// baseurl / 超时时间(5秒) / 
if(process.env.NODE_ENV=='development'&&process.env.environment=='本地环境'){
    axios.defaults.baseURL = '/my'
}else{
    axios.defaults.baseURL = process.env.baseUrl
}
// axios.defaults.baseURL = ''
axios.defaults.timeout = 7000
/**
 * POST - 请求封装
 * @param url
 * @param data
 * @returns Promise
 */
export function post(url, data = {}){
    // headers(携带token)
    axios.defaults.headers.common['token'] = token;
    // data 公共参数设置(例如token)
    // 如果你的服务端接口没有规定则不需要以下操作
     // [每次请求接口 data 数据必须携带的参数]
    // data.uid = uid
    // data.token = token
    // data.model = 'Browser'
    // data.platform = 'H5'
    return new Promise((resolve, reject) => {
        axios.post(url, data,{
            headers: {
                'content-type': 'application/x-www-form-urlencoded',
            }
        })
        // 请求成功回调
        .then(response => {
            // 拿到结果先对状态码进行对应处理(调用下方函数)
            // 传入状态码给处理函数即可(code)
            serveCode(response.data.code,response.data.message)
            // ok(正常返回)
            resolve(response.data);
        },
        // 请求失败回调
        err => {
            // 请求失败后(做一个弹出框提示用户)
            // 当然也可以做其他操作
            alert(err.message)
            reject(err)
        })
    })
}
/**
 * GET - 请求封装（与POST请求一样 | axios.get）
 * @param url
 * @param data
 * @returns Promise
 */
// ...
export function get(url, data = {}){
    // headers(携带token)
    axios.defaults.headers.common['token'] = token;
    // data 公共参数设置(例如token)
    // 如果你的服务端接口没有规定则不需要以下操作
     // [每次请求接口 data 数据必须携带的参数]
    // data.uid = uid
    // data.token = token
    // data.model = 'Browser'
    // data.platform = 'H5'
    return new Promise((resolve, reject) => {
        axios({
            method: 'get',
            url: url,
            params: data,
        })
        // 请求成功回调
        .then(response => {
            // 拿到结果先对状态码进行对应处理(调用下方函数)
            // 传入状态码给处理函数即可(code)
            serveCode(response.data.code,response.data.message)
            // ok(正常返回)
            resolve(response.data);
        },
        // 请求失败回调
        err => {
            // 请求失败后(做一个弹出框提示用户)
            // 当然也可以做其他操作
            alert(err.message)
            reject(err)
        })
    })
}
/**
 * DELETE - 请求封装（与POST请求一样 | axios.delete）
 * @param url
 * @param data
 * @returns Promise
 */
// ...
/**
 * 状态码处理
 * @param {Number} code - 状态码
 * @return void
 */
function serveCode(code,message) {
    switch(code){
        // 无权限访问,请尝试重新登录
        case 1001 :
            // elementUI 提示框
            MessageBox.alert('为了您的账号安全，请重新登录系统', '登录已过期', {
                type: 'error',
                confirmButtonText: '我知道了',
                showClose: false,
                center: true
              })
              // 用户点击确认框
              .then(() => {
                // 做一些事情...
                // 例如登录已经过期了(清除缓存)
                // localStorage.removeItem('token')
                // localStorage.removeItem('uid')
                // 最后跳转到登录页
                // router.push('/login')
              })
        break;
        case 400 :
            // elementUI 提示框
            Message({
                showClose: true,
                duration: '2000',
                message: message,
                type: 'error'
            })
        break;
        // 其他状态码情况处理
        // ...
    }
}

前言

vue2项目的配置

封装api请求

相关文章