简单实用的前端工程环境变量配置

为什么要配置环境变量？

一般项目分有开发环境、测试环境、正式环境，所使用的接口域名都是不同的，可能还分别部署三个或更多前端服务。每次切换环境或者打包的时候都需要手动更改配置，比较麻烦也容易出错，所以用脚本自动化方式直接配置不同的开发环境，本文介绍的即是在同时拥有三种：开发，测试，生产（商用）时的配置方案，不过配置过程都是大同小异，学习完之后略微变动一下即可，下面让我们开始 👌。

实现原理

采用 nodejs中 的 process 内置对象，根据各个环境的配置文件区分和切换环境，通过 process.env.NODE_ENV 来区分线上环境和本地开发环境，通过 VUE_APP_XXX 自定义环境变量来达到切换服务器域名地址的效果。

创建各环境文件

.env

# packaged version
NODE_ENV = 'development'

# online or local
VUE_APP_ENVIRONMENT = 'development'

.env.testing

# packaged version
NODE_ENV = 'production'

# online or local
VUE_APP_ENVIRONMENT = 'testing'

.env.production

# packaged version
NODE_ENV = 'production'

# online or local
VUE_APP_ENVIRONMENT = 'production'

请注意

• NODE_ENV：用来区分本地开发和线上打包环境
• VUE_APP_ENVIRONMENT：配置映射对应的服务器域名信息

改写 scripts 脚本

因为开发环境一般用作本地 serve 启动使用， .env 中的 NODE_ENV 默认为 development，所以在打包开发环境的地址作为线上时，需要将 NODE_ENV 设置为 produciton，即 cross-env NODE_ENV=produciton 命令，才能配合 vue.config.js 中的配置正常运行，生产环境地址和测试环境地址默认为 production，所以打包线上时不需要修改。相反，如果想在本地开发时切换到测试或者生产环境地址，同理使用 cross-env NODE_ENV=development 即可。

• –mode xx：切换对应的.env.xx文件，不填写时默认使用 .env 文件，即开发环境地址。
• –open：自动打开浏览器

  "scripts": {
    "serve": "cross-env NODE_ENV=development vue-cli-service serve --open --mode development",
    "build": "npm run build:dev",
    "build:dev": "cross-env NODE_ENV=production vue-cli-service build --mode development",
    "build:prod": "vue-cli-service build --mode production",
    "build:test": "vue-cli-service build --mode testing",
  }

端侧使用

/**
 * Domain infomation
 */
const version = process.env.VUE_APP_ENVIRONMENT ;
const CONFIG = {
    testing: {
        baseUrl: 'https://test.com/simulator',
        socketUrl: 'wss://test.com/simulator/'
    },
    production: {
        baseUrl: 'https://production.com/simulator',
        socketUrl: 'wss://production.com/simulator/'
    },
    development: {
        baseUrl: 'https://development.com/simulator',
        socketUrl: 'wss://development.com/simulator/'
    }
};

// Base route
export const RequestBaseUrl = CONFIG[version].baseUrl;
// WebSocket
export const SocketRootUrl = CONFIG[version].socketUrl;

以上配置方案在各种脚手架构建的项目中均可使用，在 vue-cli，create-react-app 中同理。

附上 Vue CLI 环境变量详细文档：https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F