.env VUE_APP_ 变量 json?

Question

开始将 vue cli 3 和运行用于一个我似乎找不到答案的用例。

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

感谢帮助！

Answer 1

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

Vue cli 将只允许访问以 VUE_APP_ 开头的环境变量，并允许访问 process.env.VUE_APP_SECRET

您可以在 docs

中找到它以及更多内容

Answer 2

你可以 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 3

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

尽管之前的答案是可行的，但我不想每次都想在环境变量中使用 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.parse 整个应用程序中的变量。

.env VUE_APP_ variable json?