vue项目开发过程中，经常会遇到开发、测试、生产环境配置不同的情况，这个时候就会用到环境变量

一、环境变量怎么配置

一个环境文件只包含环境变量的"键=值"对：

（1）标识当前所处的环境模式

NODE_ENV可在配置文件中标识当前所处的模式

development 开发环境模式，默认用于 vue-cli-service serve
production 生产环境模式，默认用于 vue-cli-service build

（2）环境变量怎么定义

默认有三种类型的变量

NODE_ENV：标识当前所处的环境模式

BASE_URL：应用会部署到的基础路径，和 vue.config.js中的 publicPath 选项相符

VUE_APP_：以此开头，用于自定义环境变量

访问方式：

三种变量都是在前面添加process.env.

js 复制代码

console.log(process.env.NODE_ENV)
console.log(process.env.BASE_URL)
console.log(process.env.VUE_APP_POINT_URL)

示例：

下面以三个环境配置不同的埋点地址链接为例：

首先，在根目录新建三个文件

.env.development

js 复制代码

NODE_ENV='development'
VUE_APP_POINT_URL='http://develop.point.com.cn'

.env.test

js 复制代码

NODE_ENV='production'
VUE_APP_POINT_URL='http://test.point.com.cn'

.env.production

js 复制代码

NODE_ENV='production'
VUE_APP_POINT_URL='http://production.point.com.cn'

其次，通过process.env.VUE_APP_POINT_URL在代码中使用变量

最后，在package.json中，新增一条使用.env.test环境变量的打包命令

"start": "vue-cli-service serve" (默认是development模式，使用.env.development中环境变量)

"build": "vue-cli-service build"（默认是production模式，使用.env.production中环境变量）

"build:test": "vue-cli-service build --mode test" （配置的test模式，使用.env.test中环境变量）

json 复制代码

{
  "scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint",
  },
}

按照上面常规的做法，不同的环境需要前端使用不同的命令打不同的环境包

至此，环境变量的配置讲完了。

二、一些项目上的思考

（1）后端同事说他也想看到前端的配置，并且可以在需要的时候做调整

将不同的配置，改写对象挂载在window上

放在成不同的js中，文件放在public目录下，才可以解决不被打包编译的问题

然后配置不同的环境模式变量，采用动态script脚本加载不同的对象

按这种处理办法，后端可以看到不同环境变量的js文件，却还要前端为不同环境打不同的包

（2）进一步思考，能不能只打一次包

完全脱离上面常规的环境变量配置方式，重新思考，

将所有的标识环境和环境变量的数据全部放到一个js中处理，

根据不同的环境配置不同的环境对象，挂载在window上

示例：

首先，写一个配置文件config.js，并且该文件放在public目录下

js 复制代码

// // 环境控制变量 development  test  production
const environment = 'test'

const configObj = {
  'development': {
    VUE_APP_POINT_URL: 'http://develop.point.com.c'
  },
  'test': {
    VUE_APP_POINT_URL: 'http://test.test.com.c'
  },
  'production': {
    VUE_APP_POINT_URL: 'http://production.point.com.c'
  }
}

window.config = configObj[environment]

然后，在index.html中引入

js 复制代码

  <script src="<%= BASE_URL %>config/test.js"></script>

使用方式，就是常规的window对象获取数据了

js 复制代码

console.log(window.config.VUE_APP_POINT_URL)

总结，以上我个人思考出来的解决办法应该有几个优点

应该比常规的环境变量配置好理解
应该比常规的环境变量好获取数据
相关的逻辑也聚合在一起
不用修改打包命令
方便必要的时候，后端可以直接做修改

【vue】项目环境变量配置及其思考

一、环境变量怎么配置

二、一些项目上的思考