Vue.js .env VUE_APP_uu变量json？

开始使用vue cli 3时遇到了一个我似乎找不到答案的用例

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

---

感谢您的帮助

您应该使用dot

（如

.env.production

或

.env.development

）来区分哪个配置文件，并且格式必须是KEY=value，您不能将json对象放在这里，只能放在字符串中，但您可以在代码中使用

json.parse

来取消序列化文件中的任何字符串

Vue cli只允许访问以

Vue\u APP\u开始的环境变量

和访问

process.env.Vue\u APP\u SECRET

您可以在

中找到它和更多内容 stringObj=JSON.stringfy（YourJson）， 然后将此字符串保存在VUE_应用程序的某个密钥名称中

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

因此，不能将json对象直接存储在key-value.dotEnv文件中

另一个选项是基于process.env.NODE_env加载这些json文件。

like:require（`config.${process.env.NODE_env}.js）

我想出了一个解决我自己问题的办法

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

我采取的方法是在每个特定于环境的文件（即.env development、.env production、.env test）中存储包含JSON的文件路径。例如

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

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

此文件将包含原始JSON

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

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

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

---

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

我很难相信Vue是一个不支持JSON配置文件的JS框架。。。有道理，没有道理。