让公共文件夹中的文件能够像index.html那样在构建过程中读取env变量

Question

编辑：

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

2. 基本上，我想要的是给公共文件夹中的另一个文件赋予索引文件已经拥有的相同权限。在生成期间访问环境变量。

我的应用程序中有一个.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`;

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

Answer 1

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

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

window.appIframeOrigin = process.env.VUE_APP_IFRAME_ORIGIN;

为了使appIframeOrigin可用，需要在应用程序之后评估公共脚本。

Answer 2

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

环境变量

您可以通过在项目根目录中放置以下文件来指定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-变量

Answer 3

您可以安装dotenv-npm包来创建env变量，并在本地env文件中定义iframeOrigin。

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

现在使用以下值CCD_ 11，CCD_ 12，process.env.iframeEndPoint