Vue中配置使用 process.env 详解

process.env 是 Node.js 中用于获取环境变量的 API，Vue 项目也可以使用它来存储全局配置信息。在 Vue 项目中，使用 process.env 不仅可以方便地获取全局配置信息，还可以便于根据不同的环境（如开发环境、测试环境和生产环境）进行不同的配置。

1. 环境变量的设置

首先，在项目根目录下创建 .env 文件，然后在文件中定义你想要设置的环境变量，格式为 变量名=值。如下所示：

VUE_APP_TITLE=我的网站
VUE_APP_DB_URL=http://localhost:3000

其中，VUE_APP_TITLE 和 VUE_APP_DB_URL 是自定义的变量名，http://localhost:3000 是环境变量的值。在这里，为了方便演示，暂时只设置了两个环境变量，实际项目中可能会有更多的环境变量。

2. Vue 中读取环境变量

在 Vue 中，读取环境变量需要遵循一定的规则。首先，变量名必须以 VUE_APP_ 开头，这样才能被 Vue 识别为环境变量。其次，变量的值可以是任何类型，包括字符串、数字、布尔值等。最后，读取环境变量需要使用 process.env 对象。

2.1 在代码中使用环境变量

我们可以在 Vue 组件中使用 process.env 来获取定义在 .env 文件中的环境变量，示例代码如下：

<template>
  <div>{{ title }}</div>
</template>

<script>
export default {
  data() {
    return {
      title: process.env.VUE_APP_TITLE
    };
  }
};
</script>

上述代码中，我们使用 process.env.VUE_APP_TITLE 获取了环境变量中定义的网站标题 VUE_APP_TITLE。

2.2 在 Webpack 中使用环境变量

我们还可以在 Webpack 配置文件中使用环境变量。这样可以方便地根据不同的环境，设置不同的变量，如 API 地址等。下面是一个简单的示例代码：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      API_URL: JSON.stringify(process.env.VUE_APP_DB_URL)
    })
  ],
};

通过 DefinePlugin 插件，我们可以把环境变量中的 VUE_APP_DB_URL 值，赋给 API_URL 变量。在代码中只需要引用 API_URL 就可以获取 VUE_APP_DB_URL 中定义的地址了。

结语

通过上述方法，我们可以轻松地获取环境变量，并根据不同的环境来配置不同的变量。在实际开发中，可以根据需求定制更多的环境变量，并使用它们来配置不同的参数。

附：注意事项

• .env 文件是用于存储环境变量的文件，不应该被上传到代码库中。
• .env 文件中的 变量名 都必须以 VUE_APP_ 开头，才能被 Vue 识别为环境变量。
• .env 文件中的 变量名 和 值 之间不能有空格。
• 在变量名中使用下划线时，需要使用 camelCase 命名方式来访问。例如，VUE_APP_DB_URL 对应 process.env.VUE_APP_DB_URL。
• 在项目中直接使用 process.env 时，需要配置在 public/index.html 文件中引入。如下所示：

<script>
  window.env = {
    VUE_APP_TITLE: '<%=process.env.VUE_APP_TITLE%>',
    VUE_APP_DB_URL: '<%=process.env.VUE_APP_DB_URL%>',
  }
</script>

在上述代码中，我们将环境变量赋给了 window.env 对象，然后在代码中利用 window.env 来调用这些变量。