1.背景介紹

后臺(tái)有三種環(huán)境，分別是development、test、production，我想通過配置這三種環(huán)境變量，實(shí)現(xiàn)運(yùn)行不同指令進(jìn)行不同環(huán)境的本地編譯或者打包操作。

//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'

運(yùn)行這些指令的時(shí)候，development和production的編譯和打包都沒有問題，但是test環(huán)境下，執(zhí)行npm run test進(jìn)行本地編譯，會(huì)報(bào)錯(cuò)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
默認(rèn)情況下，一個(gè) Vue CLI 項(xiàng)目有三個(gè)模式：

• development 模式用于 vue-cli-service serve
• test 模式用于 vue-cli-service test:unit
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
  如果環(huán)境變量依然為test，會(huì)和默認(rèn)的test:unit沖突，導(dǎo)致報(bào)錯(cuò)

3.解決辦法

將test改為testing即可

image.png

對(duì)應(yīng).env.test文件名改為.env.testing

NODE_ENV=testing

VUE_APP_API_PROXY='XXXX'