.env VUE_APP_变量json？

Question

开始使用vue cli 3并遇到一个用例，我似乎找不到答案。

如何通过暴露JSON对象的.env文件（即.env.development，.env.production等）设置环境变量？另外，有没有办法将外部文件的内容加载到环境变量中（即require）？

感谢协助！

Answer 1

您可以 stringObj = JSON.stringfy（YourJson）， 然后将此字符串保存在VUE_APP_SOME_KEY_NAME中。

但是当您使用它时，您必须先进行JSON.parse（）。

因此，您不能将json对象直接存储在键值.dotEnv文件中。

另一个选择是基于process.env.NODE_ENV加载这些json文件。 like: require (`config.${process.env.NODE_ENV}.js)

Answer 2

我想出了一个解决方案来解决自己的问题...

尽管前面的答案是可行的，但我不想每次都想在环境变量中使用JSON时都必须使用JSON.parse。

我采用的方法是将每个环境特定的文件（即.env-development，.env-production，.env-test）存储到包含JSON的文件的文件路径。例如...

VUE_APP_JSON_FILE=./.env.development.json-data

此文件将包含原始JSON ...

然后在我的vue.config.js中，我使用webpack DefinePlugin加载文件并通过全局变量使其可用。例如...

new webpack.DefinePlugin({
     VUE_APP_JSON: JSON.stringify(process.env.VUE_APP_JSON_FILE)
})

定义新变量将使json作为对象可用，在我的整个应用程序中，我都可以简单地引用VUE_APP_JSON.property。这使我不必使用JSON。解析整个应用中的变量。

Answer 3

您应该使用点.（如.env.production或.env.development）来区分哪个配置文件，格式必须为KEY = value，您不能在此处放置json对象，只能输入字符串，但是您可以在代码中使用JSON.parse来反序列化文件中的任何字符串。

Vue cli仅允许访问以VUE_APP_开头的环境变量和访问process.env.VUE_APP_SECRET

您可以在docs

中找到更多内容