在Bash中运行React(Vite)项目package.json脚本及Vite命令的标准方法

一、Bash中运行Vite的标准做法 #

对比几种运行方式的优劣，标准选择如下：

• 全局安装vite：不推荐。不同项目可能依赖不同版本的Vite，全局版本易与项目本地版本冲突，引发不可预期的问题。
• 直接调用node_modules中的Vite：如./node_modules/.bin/vite，虽可行但输入繁琐，并非便捷的标准方式。
• npx vite：标准推荐做法。npx会自动查找项目本地node_modules/.bin下的Vite可执行文件，优先使用项目依赖版本，避免全局版本冲突，同时无需手动输入长路径，简洁可靠。
• npm run dev：项目层面的标准启动方式。package.json的scripts会自动将node_modules/.bin加入环境变量，团队协作时可统一启动命令，避免因个人操作差异导致的问题。

二、实现带--open参数的Vite启动（不修改package.json） #

若不想修改package.json的dev脚本，又要实现vite --open的效果，有两种便捷方案：

1. 命令行直接传递参数给npm script #

npm允许执行script时追加参数，格式为：

npm run dev -- --open

这里的--是npm的参数分隔符，用于区分npm自身参数和传递给脚本的参数，实际执行的就是vite --open，无需修改任何配置。

2. 通过Bash别名实现完整流程（创建项目→安装依赖→启动带--open的服务） #

若想一键完成从创建项目到启动服务的全流程，可在Bash配置文件（如~/.bashrc或~/.zshrc，依使用的shell而定）中添加以下别名：

alias create-vite-react='function _create_vite_react() {
  # 创建Vite React项目，第一个参数为项目名
  npm create vite@latest "$1" -- --template react
  # 进入项目目录
  cd "$1"
  # 安装依赖
  npm install
  # 启动带--open参数的开发服务
  npm run dev -- --open
}; _create_vite_react'

添加后执行source ~/.bashrc（或对应配置文件）使别名生效，之后只需运行：

create-vite-react my-react-app

即可自动完成创建项目、安装依赖、打开浏览器启动开发服务的全流程。

该别名的优势：

• 遵循npm标准用法，不修改项目配置文件
• 统一操作流程，避免手动输入多步命令
• 利用npm script参数传递机制，保证使用项目本地的Vite版本

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