告别繁琐！使用命令行工具在 Vue-CLI 4 项目中轻松切换代理

前言

在现代 Web 开发中，代理服务器已成为必不可少的工具，用于调试、测试和访问受限资源。然而，当使用 Vue-CLI 4 搭建项目时，每次需要更改代理地址时，您都必须手动输入冗长的命令或修改代理配置。

这不仅耗时，而且容易出错。为了解决这一痛点，本文将介绍如何使用 node 命令行工具构建一个动态代理选择器，让您在 Vue-CLI 4 项目中轻松切换代理地址。

创建 Node 命令行工具

首先，创建一个新的 Node.js 项目。您可以使用以下命令：

mkdir vue-cli-proxy-selector
cd vue-cli-proxy-selector
npm init -y

接下来，安装必要的依赖项：

npm install inquirer commander

构建动态代理选择器

现在，让我们编写 node 命令行工具的代码。在 index.js 文件中，添加以下代码：

const { program } = require('commander');
const inquirer = require('inquirer');

const proxies = [
  { name: 'Proxy 1', address: 'http://proxy1.example.com:8080' },
  // 添加其他代理信息
];

program
  .command('select-proxy')
  .description('Select a proxy address for the Vue-CLI project')
  .action(async () => {
    const answers = await inquirer.prompt([
      {
        type: 'list',
        name: 'proxy',
        message: 'Select a proxy:',
        choices: proxies.map((proxy) => proxy.name),
      },
    ]);

    const selectedProxy = proxies.find((proxy) => proxy.name === answers.proxy);

    // 在此将选定的代理地址设置到环境变量或配置文件中
    console.log(`Selected proxy: ${selectedProxy.address}`);
  });

program.parse(process.argv);

整合到 Vue-CLI 项目

现在，我们已经创建了动态代理选择器，需要将其集成到 Vue-CLI 4 项目中。

首先，在项目的 package.json 文件中添加以下脚本：

{
  "scripts": {
    "select-proxy": "node ./node_modules/vue-cli-proxy-selector/index.js select-proxy"
  }
}

这将创建一个名为 select-proxy 的新脚本，用于运行我们的动态代理选择器。

接下来，在终端中运行以下命令：

npm run select-proxy

这将启动代理选择器，允许您从列表中选择一个代理。

结论

通过构建一个动态代理选择器，我们极大地简化了在 Vue-CLI 4 项目中切换代理地址的过程。现在，您可以使用一个简单的命令轻松地选择和设置代理，从而节省时间并避免出错。

您可以根据需要定制代理选择器，添加更多代理选项或使用不同的方法设置代理地址。发挥您的创造力，并根据您的项目需求调整脚本。