在 Vue.js 中构建期间传递要由 .env.[mode] 文件使用的参数（命令行）

Posted 2023-02-22

【中文标题】在 Vue.js 中构建期间传递要由 .env.[mode] 文件使用的参数（命令行）

【英文标题】：Pass an argument (command line) to be used by an .env.[mode] file, during build in Vue.js

【发布时间】：2019-07-11 17:46:53

【问题描述】：

目标： 传递一个要在构建时使用的参数，以便能够在我的 .env.production 文件中使用它（或者如果不可能的话，可以让我将它用作环境变量）。

.env.production 文件：

VUE_APP_CLIENT_ID=00-should-be-using-what-was-passed-by-command-00

Docker 文件：

#Inside my docker file
RUN npm run build #I need to pass the argument here

我的 package.json 脚本是：

"scripts": 
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
 ,

为什么：OBS：我确实使用 webpack，它已经由 vue-cli 配置 我知道我可以配置不同的 .env 文件和模式，但我需要能够“注入”或在我的 .env.production 文件中有一个动态变量，因为有时我会为不同的服务器构建生产。 我可以创建更多文件，这可以解决我的问题，但我想要更实用的东西。

上下文： 我正在使用 Docker 和 Auth0，实际上我使用的是一个 VUE_APP_CLIENT_ID env 变量，它定义了它是否会触发请求，我已经有两个不同的 VUE_APP_CLIENT_ID 定义（一个在 .env.development 上，一个在 . env.production）问题是我需要在两台不同的服务器上部署完全相同的服务器，每台服务器在生产中都针对不同的client_id。

工具： Docker、docker-compose、Vue.js、vue-cli 3、npm

操作系统： Ubuntu 16.04

【参考方案1】：

解决方案 1：

由于process.env暴露了所有环境变量，所以可以运行

export MYCUSTOMENV=foo && npm run build

并在任何你想要的地方使用process.env.MYCUSTOMENV。

来自 vue doc：只有以 VUE_APP_ 开头的变量才会静态嵌入到客户端包中。

解决方案 2

使用process.argv 获取所有参数，并过滤您想要的内容：

npm run build a=b foo

process.argv.forEach((val, index) => 
  console.log(`$index: $val`);
);

输出：

0: /usr/local/bin/node
1: /Users/tzp/xxx/vue-cli-service
2: build
3: a=b
4: foo

【讨论】：

这是一个非常清晰和好的解决方案，我已经在我的代码中使用了一个 VUE_APP_CLIENT_ID，我只是从 my.env 文件中对其进行了注释，转到我的 Docker 文件，用你的行替换它瞧，问题解决了，谢谢！