Vite 4自定义CLI选项报CACError，如何绕过拦截限制？

Vite的CLI会严格校验所有传入的参数，自定义参数会被判定为无效，从而抛出CACError: Unknown option '--custom-option'。以下是几种可行的绕过方案：

方案1：通过环境变量传递参数 #

这是最简洁的实现方式，无需修改Vite的核心调用逻辑：

1. 命令行调用方式：
   将自定义参数转为环境变量传递，不同系统的写法略有区别：

   # Linux/macOS
   CUSTOM_OPTION=myvalue npm run build
   
   # Windows PowerShell
   $env:CUSTOM_OPTION="myvalue"; npm run build
   
   # Windows CMD
   set CUSTOM_OPTION=myvalue && npm run build
   

2. 在vite.config.js中读取参数：
   通过process.env获取环境变量值，按需调整配置：

   import { defineConfig } from 'vite';
   
   export default defineConfig(() => {
     const customOption = process.env.CUSTOM_OPTION || 'default-value';
     return {
       build: {
         // 示例：根据参数调整输出目录
         outDir: customOption === 'prod' ? 'dist' : 'dist-dev'
       }
     };
   });
   

如果需要跨平台统一命令，可以安装cross-env依赖：

npm install cross-env --save-dev

修改package.json的scripts：

"scripts": {
  "serve": "vite",
  "build": "cross-env vite build --mode=production",
  "dev": "cross-env vite build --mode=development"
}

之后即可用统一命令调用：

cross-env CUSTOM_OPTION=myvalue npm run build

方案2：用Node脚本包裹Vite命令 #

如果必须保留--custom-option的参数格式，可以通过Node脚本中转，先解析自定义参数再调用Vite：

1. 创建build-wrapper.js脚本：

   const { spawn } = require('child_process');
   const argv = process.argv.slice(2);
   
   // 分离自定义参数与Vite原生参数
   const customParams = {};
   const viteArgs = [];
   argv.forEach(arg => {
     if (arg.startsWith('--custom-option=')) {
       customParams.customOption = arg.split('=')[1];
     } else {
       viteArgs.push(arg);
     }
   });
   
   // 将自定义参数注入环境变量
   process.env.CUSTOM_OPTION = customParams.customOption;
   
   // 调用Vite build命令，继承终端输出
   const viteProcess = spawn('vite', ['build', ...viteArgs], {
     stdio: 'inherit',
     shell: true
   });
   
   viteProcess.on('close', code => process.exit(code));
   

2. 更新package.json的scripts：

   "scripts": {
     "serve": "vite",
     "build": "node build-wrapper.js --mode=production",
     "dev": "node build-wrapper.js --mode=development"
   }
   

3. 调用命令：

   npm run build -- --custom-option=myvalue
   

4. 在vite.config.js中读取参数：
   同方案1，通过process.env.CUSTOM_OPTION获取值即可。

方案3：利用Vite的--参数分隔符 #

Vite支持用--作为参数分隔符，后面的参数不会被Vite CLI解析，会直接保留在process.argv中，需要手动解析：

1. 安装参数解析工具（可选）：
   可以用minimist简化参数解析：

   npm install minimist --save-dev
   

2. 在vite.config.js中解析参数：

   import { defineConfig } from 'vite';
   import minimist from 'minimist';
   
   // 解析--之后的自定义参数
   const argv = minimist(process.argv.slice(2));
   const customOption = argv['custom-option'] || 'default';
   
   export default defineConfig({
     build: {
       outDir: `dist-${customOption}`
     }
   });
   

3. 命令行调用方式：
   需要添加两层--，第一层是npm用来传递参数给脚本，第二层是告诉Vite停止解析参数：

   npm run build -- -- --custom-option=myvalue
   

内容的提问来源于stack exchange，提问作者Aleksandr