为公共文件夹中的文件提供在构建期间读取环境变量的能力，如 index.html 所做的

Posted 2023-02-22

【中文标题】为公共文件夹中的文件提供在构建期间读取环境变量的能力，如 index.html 所做的

【英文标题】：Give a file in the public folder the power to read env variables during build like index.html does

【发布时间】：2021-07-30 13:57:41

【问题描述】：

编辑：

我已经在这个 vue-cli 中配置了环境变量。项目。但我不能在公共文件中使用它们。

基本上，我想要的是将the index file 已经拥有的相同权力赋予公用文件夹中的另一个文件。在构建期间访问环境变量。

我的应用中有一个 .js 文件，我希望能够在其中使用环境变量。但是我没有找到如何将静态文件添加到项目的公共文件夹的方法，Vue 仍然处理这些文件。

我的文件：

var iframeOrigin = 'https://example.com';
var iframeProjectFolder = `$iframeOrigin/chatbot-aliansce-web`;
var iframeEndPoint = `$iframeProjectFolder/index.html`;

// var iframeOrigin = 'http://localhost:8080';
// var iframeProjectFolder = `$iframeOrigin`;
// var iframeEndPoint = `$iframeProjectFolder/index.html`;

我不想每次在生产中部署时都修改他。

【问题讨论】：

是否有不能将脚本注入 Vue 文件的原因？

我可以，但在这种情况下，我想构建一个独立的 .js 文件，并让任何人都可以使用添加为脚本标签的 src

你如何在你的代码中使用这个文件？

是一个将我的应用加载到 iframe 中的脚本。每次构建都需要在同一个地方。我不使用他我的应用程序。

【参考方案1】：

您可以使用.env 文件创建环境变量。

环境变量

您可以通过将以下文件放在项目根目录中来指定环境变量：

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

一个 env 文件只包含环境变量的 key=value 对：

FOO=foo
BAR=bar

CONCAT=$FOO$BAR # CONCAT=foobar

更详细的env解析规则请参考dotenv的文档

https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

【讨论】：

感谢您的回答。但是我已经在我的项目中使用了环境变量，但是这个静态 js 文件不能使用这个变量，因为 Vue 只是在我创建构建时将文件移动到我的 dist 文件夹

我认为您必须检查 docker 才能管理它。这可能是更简单的方法，但这是我知道你可以管理这种事情的方法

【参考方案2】：

您可以安装dotenv npm package 来创建环境变量并在本地环境文件中定义 iframeOrigin。

iframeOrigin:'http://localhost:8080';
iframeProjectFolder:`$iframeOrigin`;
iframeEndPoint:`$iframeProjectFolder/index.html`;

现在使用这些值 process.env.iframeOrigin, process.env.iframeProjectFolder, process.env.iframeEndPoint

【讨论】：

感谢您的回答。但是我已经在我的项目中使用了环境变量，但是这个 js 文件不能使用这个变量，因为 Vue 只是在我创建构建时将文件移动到我的 dist 文件夹。

【参考方案3】：

这是 XY 问题。 Vue CLI 使NODE_ENV、BASE_URL 和VUE_APP_* 在编译时 到process.env 可用，而process 在运行时未定义。如果需要处理一个文件，它应该位于src而不是public，然后它可以使用环境变量。根据它应该如何与应用程序的其余部分一起工作，脚本可以是单独的入口点或main 应用程序的一部分。

一种解决方法是在应用程序中将编译时环境变量暴露给全局范围，这样它们就可以在外部访问：

window.appIframeOrigin = process.env.VUE_APP_IFRAME_ORIGIN;

公共脚本需要在申请后进行评估，以便appIframeOrigin 可用。

【讨论】：

这是一个 .js 文件，我希望可以将其添加为 src 在任何 html 页面中的 script 标记中，并将我的应用程序加载到 iframe 中，因此需要位于一直都是同一个名字。

我如何配置 vue 来处理这个 js 文件并确保他在构建文件夹中始终可用相同的名称？

您可以为此禁用哈希 cli.vuejs.org/config/#filenamehashing，并通过添加另一个入口点 cli.vuejs.org/config/#pages 将此脚本视为捆绑中的另一个应用程序。这将禁用其他文件的哈希，但这是 Vue CLI 易用性的代价，否则您最终会处理 Webpack 细微差别来微调配置。