vue baseUrl多后端环境切换

系统运行环境

环境分类

一般一个项目至少有2-3个环境，最复杂的一套包括了
开发环境，开发者使用，配置较低，开发自测在此环境进行。
SIT测试环境，标准功能测试，联调其他系统接口，调整功能bug
UAT测试环境，提供给用户测试，提升用户体验，修复细微的bug
准生产环境，与生产环境基本一致，用以准备生产环境版本及回归测试
生产环境，发布用户使用的环境。
一般小项目也该有开发环境和测试环境两种。

环境切换

后端可能有多个环境以适应测试的需要，前端一般不需要太多环境，这个时候就需要来连接不同的环境的后端，直接改地址再重启总是会有忘记改回来的时候，这个时候上生产就很可能导致爆炸，所以在前端定义多套环境，在编译阶段就解决掉这种风险。

vue多环境配置

在根目录新建.env环境配置文件

对应环境的命名规则：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

.env.development对应开发环境
.env.test 对应测试环境
.env.production 对应生产环境

如果还有其他环境可以继续添加。

配置文件内容

配置文件内容规范是键值对 key = value 的形式，对应的变量命名可以大小写都随意，但一般都是大写。环境变量一般包括
ENV、NODE_ENV 环境标识
VUE_APP 开头的环境变量可以在代码中直接使用

.env.development内容如下

# 开发环境配置
ENV = 'dev'
NODE_ENV = 'dev'

# 开发环境端口
port = 80

# 开发环境
VUE_APP_BASE_API = '/dev-api'

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

# 测试环境配置
ENV = 'test'
NODE_ENV = 'test'

# 测试环境
VUE_APP_BASE_API = '/test-api'

# 生产环境配置
ENV = 'prod'
NODE_ENV = 'prod'

# 生产环境
VUE_APP_BASE_API = '/prod-api'

每个环境一般有不同的地址，端口，还有对应的请求url，配置文件的内容一般就包含这些变量。

配置启动项

在package.json中可以配置对应环境的启动

–mode 代表对应的模式，比如test 对应为测试环境，vue对应就加载.env.test文件中的配置。

配置vue.config.js

可根据配置加载不同的端口

const port = process.env.port || 80

在vue.config.js中添加proxy，将对应url的请求拦截发送至target的地址

devServer: {
    host: '0.0.0.0',
    port: port,
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'http://localhost',
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }
  },

这也是将对应环境的请求，根据 VUE_APP_BASE_API 拦截发送至指定环境。

axios请求封装

封装axios请求，将每个请求带上环境的公共请求url，这样在proxy中就可以拦截对应环境的请求。

mock请求

在mock中也引用process.env.VUE_APP_BASE_API对应环境公共url，可让在测试的接口发送至mock

/* 可配置切换环境 */
let baseUrl = process.env.VUE_APP_BASE_API;
console.log(baseUrl)

Mock.mock(`${baseUrl}/testPost`,'post',{
  "string|1-10": "★"
})