npm 包 vue-cli-plugin-expose-env 使用教程

介绍

vue-cli-plugin-expose-env 是一个可以在 Vue 项目中自动暴露环境变量的插件。通过这个插件，你可以在项目中方便地使用环境变量，从而实现项目的配置隔离，包括不同环境的 API 地址，不同环境的静态资源 URL 等等。

安装

前提条件：已安装 vue-cli。

使用以下命令安装封装了 vue-cli-plugin-expose-env 的 vue-cli-plugin-env-variables：

vue add env-variables

使用

配置

在项目根目录下的 .env 文件中，我们可以设置全局的环境变量。以 .env.development 为例：

# .env.development
VUE_APP_FLAG=development
VUE_APP_API=http://localhost:8080/api

其中以 VUE_APP_ 开头的变量为自定义的全局变量，可以在 Vue 项目中通过 process.env.VUE_APP_XXX 的方式调用。

注意事项：

1. 变量名必须以 VUE_APP_ 开头。
2. 修改 .env 文件后需要重启服务器，才能使环境变量生效。

调用

在 Vue 组件中即可调用环境变量，如下：

export default {
  created() {
    console.log(process.env.VUE_APP_FLAG)
    console.log(process.env.VUE_APP_API)
  }
}

更多

如果你需要使用其它的变量，请参考 dotenv。

示例

以下是一个简单的示例代码。

.env.production

VUE_APP_FLAG=production
VUE_APP_API=http://api.example.com

Vue 组件

-- -------------------- ---- -------
----------
  -----
    ---------- --- ------
    ------ ----- --- ------
  ------
-----------

--------
------ ------- -
  --------- -
    ----- -
      ------ ------------------------
    --
    ----- -
      ------ -----------------------
    -
  -
-
---------

总结

本文介绍了如何使用 vue-cli-plugin-expose-env 插件暴露环境变量，并在 Vue 项目中调用。通过使用环境变量，我们可以方便地实现不同环境的配置隔离。希望本文对你有帮助！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5551ab1864dac66b0d