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

2023-12-31

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

.env.生产文件:

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

泊坞窗文件:

#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"
 },

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

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

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

OS:
乌班图16.04


  1. 解决方案1:

自从process.env公开所有环境变量,以便您可以运行

export MYCUSTOMENV=foo && npm run build

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

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

  1. 解决方案2

Use process.argv获取所有参数,并过滤你想要的内容:

npm run build a=b foo

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

output:

0: /usr/local/bin/node
1: /Users/tzp/xxx/vue-cli-service
2: build
3: a=b
4: foo
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐

  • 从 PHP 调用 Perl 脚本并传入变量,同时还使用可变的 Perl 脚本名称

    我通常如下从 PHP 调用 perl 脚本并以这种方式传递变量 它工作得很好 但是现在我正在构建一个可重用的组件 我还想改变我传入的 perl 脚本名称 这是让我有些头痛 所以我想知道是否有人可以指出更好的方法来做到这一点 因为我的方法不起
  • SQL Server 代理作业失败时通知多个操作员

    我在 SQL Server 2008 中有一个作业设置 它会向one当作业失败时操作员 问题 是否可以设置针对该特定作业向多个操作员发送通知电子邮件 我相信一个可能的解决方法是为每个给定严重性的数据库创建大量警报 但我希望有一种更简洁的方法
  • 如何捕获 django url 中包含一个或多个正斜杠的字符串

    我的代码看起来像这样 urls py from django urls import path from import views app name graduates urlpatterns path status detail
  • 我可以将 ShowDialog() 设置为不在最顶层吗?

    有没有办法将 ShowDialog 设置为不在最顶层 我已经查看了所有相关的SO问题 但没有一个quite符合我的情况 我所做的是从 datagridview 按钮列打开一个新的 WinForm 这个新表单从几个 SQLite 表中提取信息
  • PostgreSQL 更改返回行的顺序

    我有一个名为类别的表 其中包含 ID long Name varchar 50 parentID long 和 shownByDefault boolean 列 该表包含 554 条记录 所有显示的默认值都是 假 当我执行 从类别中选择 i
  • 使用 VBScript 自动化应用程序

    我是 VB 脚本编写新手 我希望 VB 脚本根据应用程序的事件进行操作 例如 VBScript 应该等到应用程序中出现弹出消息 VBScript 和 Windows 脚本宿主仅支持原始 GUI 自动化 例如激活窗口 AppActivate
  • 如何存储每个类别对象的总提款金额?

    我有一个Category类 并且该类的每个实例都有一个分类帐属性 该分类帐属性实际上是一个字典列表 其中包含以下形式的取款和存款金额以及描述 amount amount description description 现在 我想定义一个函数
  • 在 Blend 2015 中使用 3D OBJ 文件

    我刚刚开始学习 WPF 3D 并按照教程进行操作 我创建了一个 3D 模型并将其导出为 OBJ 文件 创建一个新的 WPF 项目并添加此 OBJ 文件 我如何在里面使用它Window or Viewport3D 我在 Microsoft 找
  • 便携式图书馆的语言选择

    我想编写一个库 它将与在 Windows Linux 和 OS X 等现代操作系统上运行的其他程序动态链接 即 它将部署为 dll or so模块 在这种情况下最合适的语言是什么 我应该坚持使用纯 C 吗 或者C 也可以吗 您可以使用 C
  • std::lower_bound 和 std::set::lower_bound 之间的差异

    C 草案谈到了 std lower bound 25 4 3 1 lower bound lower bound template
  • 可以在沙箱中运行的 Mini-OSGi(如 AppEngine 或 WebStart)?

    我真的很喜欢 OSGi 实现的模块化捆绑包的概念 我还喜欢 托管部署 服务 例如 Google AppEngine 用于 Web 应用程序 或 Java WebStart 用于客户端软件 这两个想法似乎在概念上很好地互补 然而 OSGi 标
  • 对 Primefaces 中的树节点进行排序

    我正在使用 JSF 2 1 和 Primefaces 3 3 我正在使用 primefaces 树组件从数据库中创建树 我想按字母顺序对各级树节点进行排序 请帮我解决这个问题 我们在排序时遇到了问题Comparator并发现 有一个方便的P
  • 反序列化 XML 时忽略指定的编码

    我正在尝试通过套接字读取从外部接口接收到的一些 XML 问题是 XML 标头中指定的编码错误 显示为 iso 8859 1 但实际上是 utf 16BE 据记录编码是utf 16BE 但显然他们忘记设置正确的编码 为了在反序列化时忽略编码
  • Node.js HTTP 客户端中的自动 UTF-8 编码

    我尝试使用 Node js 从远程主机加载 XML 内容 问题是像 这样的德语 元音变音 被破坏了 就像在浏览器中一样 这通常是一个简单的编码问题 但由于远程主机上的 XML 内容是用 iso 8859 2 编码的 所以我没有成功让这些字母
  • 消息:插入动态输入字段数据时未初始化的字符串偏移量:0

    我正在使用 CodeIgniter 我得到了动态选择框 从第二个选择框中 用户可以选择状态并根据状态输入字段进行显示 检查下面的屏幕截图 如果用户单击Add More然后将显示下面的选择框 现在从第二个选择框中 我选择Status one因
  • 如何使用 Symfony 表达式语言在 @Security 注释中使用类常量?

    我正在使用 Symfony 3 并且创建了一个自定义 Voter 类 我想使用访问它SensioFrameworkExtraBundle https symfony com doc current bundles SensioFramewo
  • 对重载new和delete施加限制

    是否可以对重载运算符 new 和 delete 施加一些限制 我的重载 new 在另一个文件中链接到我的测试程序 场景是 if condition is satisfied call overloaded new else call the
  • 如何在android中卸载应用程序时清除数据库

    我使用数据库来存储消息 如果我卸载我的应用程序并再次重新安装相同的应用程序 数据库保持不变 但我想清除我的数据库 如何解决这个问题 要监听卸载事件 您必须实现收到的广播 例如
  • 在条件表达式中声明变量(三元运算符)

    是否可以在条件表达式中声明变量 例如 下面的代码返回语法错误 因为我已经在条件表达式中声明了变量 x var a document getElementById userData var d a value function d lengt
  • 在 Vue.js 中构建期间传递要由 .env.[mode] 文件使用的参数(命令行)

    Goal 传递一个在构建时使用的参数 以便能够在我的 env Production 文件中使用它 或者如果不可能的话 可以让我将它用作环境变量 env 生产文件 VUE APP CLIENT ID 00 should be using wh