打包于 shell 交互指定模式

交互式打包

在开发环境和生产环境打包时，可以编写一个 Shell 脚本（或 Node 脚本）来与用户交互，基于用户输入来决定调用哪个打包命令。主要步骤如下：

1. 创建一个 Shell 脚本并编写交互逻辑。用户在执行脚本时输入开发或生产，脚本根据输入执行对应的 npm run 命令。

2. 若需要在 package.json 中增加脚本来执行该交互脚本，可将脚本加到 scripts 中以统一管理。

3. 最终执行时，只需输入 ./build.sh 或 npm run build:interactive，即可根据提示选择打包环境。

示例脚本 (build.sh)：

#!/bin/bash

echo "请选择打包环境："
echo "1. 开发环境"
echo "2. 生产环境"
echo "3. 测试环境"
read -p "请输入选项（1 或 2 或 3）：" choice

if [ "$choice" == "1" ]; then
  npm run build:dev
elif [ "$choice" == "2" ]; then
  npm run build:prod
elif [ "$choice" == "3" ]; then
  npm run build:test
else
  echo "无效选项，请重新运行脚本并输入正确的选项。"
fi

交互式环境

1. 新建一个 Shell 脚本（例如 build.sh），编写如下内容：

#!/usr/bin/env bash

# 提示用户输入 mode 参数，比如 development、test、production 等
echo "请输入要使用的 mode（可选值如 development、test、production 等，默认为 development）："
read MODE

# 如果用户未输入，则使用默认值 development
if [ -z "$MODE" ]; then
    MODE="development"
fi

echo "您选择的 mode：$MODE"
echo "开始执行打包命令..."

# 执行打包流程，这里以 vue-tsc + vite build 为例
# 注意将 --mode 后面的值改为 Shell 脚本变量 $MODE
vue-tsc && vite build --config vite-web.config.ts --mode "$MODE"

2. 为脚本赋执行权限（在 Mac 或 Linux 等 Unix 系统下）：

chmod +x build.sh

3. 在 package.json 中加一个自定义脚本（可选）。如果你希望通过执行 npm run build:interactive 来进入交互模式，可以这样写：

{
  "scripts": {
    "build:interactive": "./build.sh",
    "build:web": "vue-tsc && vite build --config vite-web.config.ts --mode production",
    "build:web:test": "vue-tsc && vite build --config vite-web.config.ts --mode development"
  }
}

4. 执行脚本时，脚本会提示你输入 mode。根据输入的不同，脚本会将相应的值传给 vite build 的 --mode 选项，从而实现"同一个命令却指定不同 mode"的需求。

   • 直接执行脚本：
     ./build.sh

   • 或者通过 package.json 脚本：
     npm run build:interactive

这样就可以在一个脚本内，动态指定 --mode。无需为每种 mode 都写在 package.json 里，只要在执行时通过 Shell 脚本交互选择即可。

以上待实践修改