1.背景介绍

后台有三种环境，分别是development、test、production，我想通过配置这三种环境变量，实现运行不同指令进行不同环境的本地编译或者打包操作。

//package.json
"scripts": {
    "dev": "vue-cli-service serve --mode development",
    "test": "vue-cli-service serve --mode test",
    "prod": "vue-cli-service serve --mode production",
    "build-dev": "vue-cli-service build --mode development",
    "build-test": "vue-cli-service build --mode test",
    "build": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
  },

//.env.development
NODE_ENV=development

VUE_APP_API_PROXY='XXXXX'

//.env.test
NODE_ENV=test

VUE_APP_API_PROXY='XXXXX'

//.env.production
NODE_ENV=production

VUE_APP_API_PROXY='XXXXX'

运行这些指令的时候，development和production的编译和打包都没有问题，但是test环境下，执行npm run test进行本地编译，会报错Uncaught ReferenceError: exports is not defined

image.png

2.原因

官方文档地址：https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F
默认情况下，一个 Vue CLI 项目有三个模式：

• development 模式用于 vue-cli-service serve
• test 模式用于 vue-cli-service test:unit
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
  如果环境变量依然为test，会和默认的test:unit冲突，导致报错

3.解决办法

将test改为testing即可

image.png

对应.env.test文件名改为.env.testing

NODE_ENV=testing

VUE_APP_API_PROXY='XXXX'