vue-cli-serve 环境配置

vue-cli-service serve

用法：vue-cli-service serve [options] [entry]

选项：

  --open    在服务器启动时打开浏览器
  --copy    在服务器启动时将 URL 复制到剪切版
  --mode    指定环境模式 (默认值：development)
  --host    指定 host (默认值：0.0.0.0)
  --port    指定 port (默认值：8080)
  --https   使用 https (默认值：false)

场景

实际项目开发中，我们会有多个环境，开发、测试、生产等区分。为了便于使用，可以配置不同环境的文件

环境变量

官方文档

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

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

FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value

警告

不要在你的应用程序中存储任何机密信息（例如私有 API 密钥）！

环境变量会随着构建打包嵌入到输出代码，意味着任何人都有机会能够看到它。

根据以上文件，我们可以创建.env.development、.env.production、.env.test等文件来配置不同环境常量

方案一

在package.json的script中添加配置：

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

如果环境多个，并有可能需要配置不同参数，这样就需要添加很多个配置。显得不够灵活，那我们为什么不直接在npm run的时候添加参数呢？
node命令的入参获取本质上就是用process.argv获取。但是我们直接在npm run serve后面添加参数vue.config.js中process.argv获取不到入参，也就是说后面加的参数都无效。