vue中怎么快速切换到各种环境，超级实用版

• 怎么在本地开发中快速随时切换 测试环境接口、仿真环境接口、线上环境接口？
• 怎么在本地开发中随意使用console，但是线上环境或者任意环境快速去掉所有console？
• 怎么快速实现其他任何因环境不同的需求？

如果上面的都知道了，就跳出此文吧~

实际开发中的应用

一个项目的访问地址可能有：本地环境、测试环境、仿真环境、正式环境。 一个项目的接口地址可能有：本地环境、测试环境、仿真环境、正式环境。

访问地址是什么决定的呢？

其实就是项目在哪台电脑上。在你本地，就是本地环境，以localhost或者10.xx访问。在测试服务器上，就会以测试的域名或者ip访问。仿真和正式的同理。

接口地址是什么决定的呢？

其实是接口的项目在哪台电脑上。在你本地，就是本地环境，以localhost或者10.xx访问。在测试服务器上，就会以测试的域名或者ip访问。仿真和正式的同理。

项目通过ajax请求接口，现在常用axios，所以项目理论上可以随意切换接口的地址。

但是，很多时候不同环境的接口的appid和appkey不一样，甚至，不同环境的接口地址也不完全相同，想要整个项目能一瞬间切换各种环境的接口，还是需要点准备工作的。

以下是vue中，将项目分为 本地环境、测试环境、仿真环境、正式环境 的步骤。以仿真环境为例。

1. 创建env

根目录下创建 .env.stage，变量需要用VUE_APP开头。只有NODE_ENV和BASE_URL可以单独使用，但有特定的含义。没特殊情况别用.env.production

VUE_APP_API_ORIGIN = 'http://test.com'
VUE_APP_API_COMMON_PATH = '/test/apis'

VUE_APP_APPKEY = 'key_test'
VUE_APP_APPID = '001'

2. 配置代理，简单的理论可以参照此文

根目录下，创建vue.config.js

const API_ORIGIN = process.env.VUE_APP_API_ORIGIN
const API_COMMON_PATH = process.env.VUE_APP_API_COMMON_PATH
const APPKEY = process.env.VUE_APP_APPKEY
const APPID = process.env.VUE_APP_APPID
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: API_ORIGIN,
        pathRewrite: { '^/api': API_COMMON_PATH },
        ws: true,
        changeOrigin: true
      }
    }
  }
}

3. 配置axios，更加深度的参照本文，特别棒

一般创建src/common/instance.js,如果有sign的规则，增加src/common/sign.js

先npm i crypto-js qs axios

/**
  sign.js
**/
import md5 from 'crypto-js/md5'
const APPKEY = process.env.VUE_APP_APPKEY
const APPID = process.env.VUE_APP_APPID
// 一般会有sign这个参数，有特定的生成规则 这边是字典排序之后加上appid，MD5
export const getSignStr = params => {
  // 将key按照字典顺序排列
  let orderdKeys = Object.keys(params).sort()
  // 拿到string的字符串
  let str = ''
  orderdKeys.forEach(key => {
    const value = params[key]
    // 接口的参数为空的时候不参加sign，特殊情况，key是file的时候不参加sign
    const isCanSign = !(key === 'file')
    isCanSign && (str += `${key}=${value}&`)
  })
  // 前面加上appid 后面加上 appkey
  str = `appid=${APPID}&appkey=${APPKEY}&${str}appkey=${APPKEY}&appid=${APPID}`
  // 转小写 => md5 => 转大写
  str = str.toLocaleLowerCase()
  str = md5(str).toString()
  str = str.toLocaleUpperCase()
  return str
}

/**
  instance.js
**/
import axios from 'axios'
import Qs from 'qs'
import { getSignStr } from './sign'


const API_ORIGIN = process.env.VUE_APP_API_ORIGIN
const API_COMMON_PATH = process.env.VUE_APP_API_COMMON_PATH
const APPID = process.env.VUE_APP_APPID

let instance = axios.create({
  // 超时时间
  timeout: 1000 * 20,
  // 如果接口希望接口对象形式，下面就是多余的！！！！ 若接口希望收到的数据格式  a=1&b=2，前端传参数的时候希望直接写成对象，然后再这边统一变成字符串传给接口
  transformRequest: [
    function (data) {
      return Qs.stringify(data)
    }
  ]
})
// 请求的时候只是传入路径，这边根据路径加上域名
const getFullApiPath = path => API_ORIGIN + API_COMMON_PATH + path
// 一般很多接口会有appid sign 这样的公共参数
const getFullParams = params => {
  let commonParams = { appid: APPID, sign: getSignStr(params) }
  params = { ...commonParams, ...params }
  return params
}


// 请求拦截器 一般处理所有请求的通用逻辑
instance.interceptors.request.use(
  // config是关于此次请求所有的信息
  config => {
      const API_ORIGIN = process.env.VUE_APP_API_ORIGIN
const API_COMMON_PATH = process.env.VUE_APP_API_COMMON_PATH
    // 打包的时候，才将接口加上origin，当然如果访问地址和接口地址同源的话，这行就不用了
    process.env.NODE_ENV === 'production' && && (config.url = getFullApiPath(config.url))
    // 增加公共参数 appid sign，post的请求体是data，get只能是params
    config.method === 'post' ? (config.data = getFullParams(config.data)) : (config.params = getFullParams(config.params))
    return config
  },
  error => Promise.error(error)
)
// 响应拦截器 统一处理错误之类的
// instance.interceptors.response.use()
export default instance

// 创建`src/common/api.js`
import instance from './instance'
const AjaxAjaxGetQuartersList = (uid) => {
  return instance.post('/api/Index', { uid })
}
export {
  AjaxAjaxGetQuartersList
}

4. 配置package.json

  "scripts": {
    "serve-stage": "vue-cli-service serve --mode stage",
    "build-stage": "vue-cli-service build --mode stage",
  },

5. 根据需求，随意切换命令，就可以切换环境了

• 本地开发的时候，想要切换到仿真环境的接口，运行npm run serve-stage
• 想要打仿真环境的包，运行 npm run build-stage
• 想要其他环境，重复上面4步，因为第三步配置axios就不用了，哈哈哈

想要在访问的哪种环境去掉console

比如想要在访问显示线上地址的时候去掉console

1. 配置.env.prod

VUE_APP_HAS_CONSOLE = 0
VUE_APP_API_ORIGIN = 'http://prod.com'
VUE_APP_API_COMMON_PATH = '/apis'

VUE_APP_APPKEY = 'key_prod'
VUE_APP_APPID = '004'

2. 配置vue.config.js

先npm i terser-webpack-plugin -D

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  configureWebpack({
    optimization: {
      minimizer: [new TerserPlugin({ terserOptions: { compress: { drop_console: process.env.VUE_APP_HAS_CONSOLE === 0 } } })]
    }
  })
}

3. 配置package.json

  "scripts": {
    "build-stage": "vue-cli-service build --mode prod",
  },

4. 运行合适的命令

想要访问线上环境的时候，不要console，运行npm run build-prod

抛转引玉

哪个环境不要console不过是个引子。其他的因为环境不同的需求，基本可以用这个逻辑。^(*￣(oo)￣)^

对了，这句话可以记着。有天突然就理解了。
vuecli中，vue-cli-service serve的NODE_ENV是development，serve其实就是本地开发的时候用，vue-cli-service build的NODE_ENV是production，build其实就是打包部署到服务器的时候用。

参考资料

• vuecli的官网关于环境的说明