在Vue.js中构建期间,传递一个参数(命令行)以供.env。[mode]文件使用

问题描述 投票:3回答:1

目标: 传递一个在构建时使用的参数,以便能够在我的.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.production上的.env.development一个)问题是我需要在两个不同的服务器上部署完全相同的服务器,每个服务器都针对生产目标不同的client_id。

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

OS: Ubuntu 16.04

docker vue.js npm vue-cli-3
1个回答
4
投票
  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}`);
});

输出:

0: /usr/local/bin/node
1: /Users/tzp/xxx/vue-cli-service
2: build
3: a=b
4: foo
© www.soinside.com 2019 - 2024. All rights reserved.