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

sab*_*sab 7 npm docker vue.js vue-cli-3

目标:
传递要在构建时使用的参数,以便能够在我的 .env.production 文件中使用它(或者如果不可能的话,可以让我将其用作环境变量)。

.env.production 文件:

VUE_APP_CLIENT_ID=00-should-be-using-what-was-passed-by-command-00
Run Code Online (Sandbox Code Playgroud)

码头工人文件:

#Inside my docker file
RUN npm run build #I need to pass the argument here
Run Code Online (Sandbox Code Playgroud)

我的 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"
 },
Run Code Online (Sandbox Code Playgroud)

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

上下文:
我正在使用 Docker 和 Auth0,我实际上使用了一个VUE_APP_CLIENT_IDenv 变量来定义它是否要为请求点击,我已经有两个不同的VUE_APP_CLIENT_ID定义(一个关于 .env.development 一个关于 .env.production)问题是我需要在两台不同的服务器中部署完全相同的服务器,每台服务器都针对生产中的不同 client_id。

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

操作系统:
Ubuntu 16.04

tia*_*eng 11

  1. 解决方案 1:

由于process.env公开了所有环境变量,因此您可以运行

export MYCUSTOMENV=foo && npm run build

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

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

  1. 解决方案2

使用process.argv得到你想要的所有参数,过滤器:

npm run build a=b foo

process.argv.forEach((val, index) => {
  console.log(`${index}: ${val}`);
});
Run Code Online (Sandbox Code Playgroud)

输出:

0: /usr/local/bin/node
1: /Users/tzp/xxx/vue-cli-service
2: build
3: a=b
4: foo
Run Code Online (Sandbox Code Playgroud)