Vite读取命令行和环境变量作为接口请求地址

利用 Vite 读取命令行和环境变量，轻松管理不同环境的接口请求地址

简介

在开发项目时，在不同的环境中使用不同的接口请求地址是一个常见需求。例如，在开发环境中，我们可能使用本地服务器提供的接口地址，而在生产环境中，我们可能使用远程服务器提供的接口地址。为了方便地管理不同的接口地址，我们可以使用 Vite 读取命令行变量和环境变量。

读取命令行变量

要读取命令行变量，我们可以使用 process.argv 数组。此数组包含命令行参数，其中第一个元素是 Node.js 可执行文件路径，第二个元素是 JavaScript 文件路径，其余元素是命令行参数。

代码示例：

console.log(process.argv);

输出：

[
  '/usr/local/bin/node',
  '/Users/username/Documents/projects/my-project/src/index.js',
  '--port=3000'
]

我们可以通过以下代码读取命令行参数：

const port = process.argv.find((arg) => arg.startsWith('--port='));
if (port) {
  console.log(`Port: ${port.slice(7)}`);
}

输出：

Port: 3000

读取环境变量

要读取环境变量，我们可以使用 process.env 对象。此对象包含环境变量，键是环境变量的名称，值是环境变量的值。

代码示例：

console.log(process.env);

输出：

{
  NODE_ENV: 'production',
  PORT: '3000',
  HOME: '/Users/username',
  ...
}

我们可以通过以下代码读取环境变量：

const port = process.env.PORT;
if (port) {
  console.log(`Port: ${port}`);
}

输出：

Port: 3000

设置接口请求地址

我们可以使用 Vite 的 define 方法在 vite.config.js 文件中定义一个常量 BASE_URL，并将命令行变量或环境变量的值赋给此常量。

代码示例：

// vite.config.js
export default defineConfig({
  define: {
    'process.env': process.env,
    'BASE_URL': process.argv.find((arg) => arg.startsWith('--base-url=')) || process.env.BASE_URL || 'http://localhost:3000',
  },
});

在以上示例中，我们使用了 --base-url= 命令行参数或 BASE_URL 环境变量来指定接口请求地址。如果没有指定命令行参数或环境变量，则使用默认接口请求地址 http://localhost:3000。

我们可以使用 BASE_URL 常量来设置接口请求地址。例如，以下代码使用 BASE_URL 常量来设置 Axios 实例的基准 URL：

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: BASE_URL,
});

现在，我们可以在项目中使用 axiosInstance 实例发送接口请求。当我们在开发环境中运行项目时，BASE_URL 常量将被设置为本地的接口请求地址，当我们在生产环境中运行项目时，BASE_URL 常量将被设置为远程的接口请求地址。

常见问题解答

• 如何使用命令行变量？
  您可以使用 process.argv 数组来读取命令行变量。

• 如何使用环境变量？
  您可以使用 process.env 对象来读取环境变量。

• 如何设置接口请求地址？
  您可以在 vite.config.js 文件中使用 define 方法定义一个常量 BASE_URL，并将命令行变量或环境变量的值赋给此常量。

• 如何使用 BASE_URL 常量设置接口请求地址？
  您可以使用 BASE_URL 常量来设置 Axios 实例的基准 URL，或者使用其他方法来设置接口请求地址。

• 为什么使用 Vite 读取命令行变量和环境变量来管理接口请求地址？
  这种方法简单易用，可以提高开发效率，并确保在不同的环境中使用正确的接口请求地址。