巧用vite环境变量配置：灵活适配不同地区业务需求

2023-12-20 14:27:08

用环境变量驾驭全球业务，助力多地区部署

作为开发人员，我们经常面临这样一个挑战：如何满足不同地区的业务需求，同时又不引入代码混乱。幸运的是，通过利用环境变量，我们可以轻松解决这个问题。

环境变量的配置

首先，让我们了解一下环境变量。环境变量是存储特定于环境信息的键值对。在我们的例子中，环境信息将包括地区特定的配置，如语言、文化和法规。

要配置环境变量，我们需要创建一个名为 .env 的文件。在这个文件中，我们将指定每个环境变量及其值。例如：

REGION=us
LANGUAGE=en

为了防止将这些环境变量提交到版本控制，我们将其添加到 .gitignore 文件中。

在 Vite 中使用环境变量

Vite 是一个流行的构建工具，它允许我们利用环境变量来配置应用程序的行为。要在 Vite 中使用环境变量，我们可以在配置文件中添加 define 选项：

// vite.config.js
module.exports = {
  define: {
    'process.env.REGION': process.env.REGION,
    'process.env.LANGUAGE': process.env.LANGUAGE,
  },
};

这将使我们能够在代码中使用 process.env 对象访问这些环境变量：

// main.js
console.log(process.env.REGION); // 输出 "us"
console.log(process.env.LANGUAGE); // 输出 "en"

根据命令打包不同的环境代码

接下来，让我们解决根据不同的命令打包不同环境代码的问题。为此，我们可以在命令行中使用 --env 选项：

vite build --env=production
vite build --env=staging

此外，我们可以在 Vite 配置文件中添加 build 选项来针对不同环境配置不同的构建设置：

// vite.config.js
module.exports = {
  build: {
    env: process.env.NODE_ENV,
    // 生产环境配置
    production: {
      minify: true,
    },
    // 测试环境配置
    staging: {
      minify: false,
    },
  },
};