介绍
vue-cli-plugin-expose-env 是一个可以在 Vue 项目中自动暴露环境变量的插件。通过这个插件，你可以在项目中方便地使用环境变量，从而实现项目的配置隔离，包括不同环境的 API 地址，不同环境的静态资源 URL 等等。
安装
前提条件：已安装 vue-cli。
使用以下命令安装封装了 vue-cli-plugin-expose-env 的 vue-cli-plugin-env-variables：
--- --- -------------
使用
配置
在项目根目录下的 .env 文件中，我们可以设置全局的环境变量。以 .env.development 为例：
- ---------------- ------------------------ -------------------------------------
其中以 VUE_APP_ 开头的变量为自定义的全局变量，可以在 Vue 项目中通过 process.env.VUE_APP_XXX 的方式调用。
注意事项：
- 变量名必须以
VUE_APP_开头。 - 修改
.env文件后需要重启服务器，才能使环境变量生效。
调用
在 Vue 组件中即可调用环境变量，如下：
------ ------- -
--------- -
-------------------------------------
------------------------------------
-
-更多
如果你需要使用其它的变量，请参考 dotenv。
示例
以下是一个简单的示例代码。
.env.production
----------------------- ----------------------------------
Vue 组件
----------
-----
---------- --- ------
------ ----- --- ------
------
-----------
--------
------ ------- -
--------- -
----- -
------ ------------------------
--
----- -
------ -----------------------
-
-
-
---------总结
本文介绍了如何使用 vue-cli-plugin-expose-env 插件暴露环境变量，并在 Vue 项目中调用。通过使用环境变量，我们可以方便地实现不同环境的配置隔离。希望本文对你有帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5551ab1864dac66b0d