1.配置npm run 的模式

在项目的根目录编辑package.json，分为开发 测试 生产 甚至更多。

"scripts": {
  "dev": "vue-cli-service serve --mode dev",
  "test": "vue-cli-service build --mode test",
  "prod": "vue-cli-service build --mode prod"
},

2.创建环境配置文件

在项目的根目录新建以下文件
.env.dev .env.test .env.prod

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

3.配置环境的默认变量

只能配置 NODE_ENV=production webpack的读取NODE_ENV配置才启用压缩逻辑，默认是dev的NODE_ENV所以打包出来特别大

NODE_ENV = 'production'

4.配置.env环境的业务变量

VUE_APP_NAME= 'abc'

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：

console.log(process.env.VUE_APP_NAME)

5.实际应用（以打包地址为 bengbuh5 为例）

一、配置vue.config.js

publicPath: "/" + process.env.VUE_APP_NAME,
outputDir: process.env.VUE_APP_NAME, 

二、新建两个文件 .env.bengbuh5和.env.bengbuh5.local

.env.bengbuh5

NODE_ENV='production'

.env.bengbuh5.local

VUE_APP_NAME='bengbuh5'

三、配置命令在package.json的scripts中

    "bengbuh5": "vue-cli-service build --mode bengbuh5",

四、运行命令

    npm run bengbuh5

五、改git提交时配置

由于 .env.[mode].local 会被 git 忽略，想提交上此类文件代码需要更改.gitignore文件
将如下代码注释（此类文件#是注释）

   # .env.*.local

6.另一种方式（以打包地址为 bengbuh5 为例）

一、安装cross-env

npm install --save-dev cross-env

二、配置命令在package.json的scripts中

"bengbuh5": "cross-env NODE_ENV=production VUE_APP_NAME=bengbuh5 vue-cli-service build",

三、配置vue.config.js

publicPath: "/" + process.env.VUE_APP_NAME,
outputDir: process.env.VUE_APP_NAME, 

ps:
cross-env使得您可以使用单个命令，而不必担心为平台正确设置或使用环境变量。 只要在POSIX系统上运行就可以设置好，而cross-env将会正确地设置它。
说人话: 这个迷你的包(cross-env)能够提供一个设置环境变量的scripts，让你能够以unix方式设置环境变量，然后在windows上也能兼容运行。

地址： https://cli.vuejs.org/zh/guide/mode-and-env.html