yarn 创建的 vite+vue 项目没有 vite 可执行文件怎么办？

用下面的命令创建了 vue 项目

yarn create vite image_search_web --template vue

然后我想运行这个 vue 项目的时候，发现：

╰─➤  npm run dev                                                                                                                                                                                                                                                                                                1 ↵

> image_search_web@0.0.0 dev
> vite

sh: vite: command not found

说我没有 vite

如何获取这个 vite？需要单独安装吗？

更新

使用 yarn 安装 vite

─➤  yarn add vite                              
yarn add v1.22.19
info No lockfile found.
[1/4] 🔍  Resolving packages...
warning vue > @vue/compiler-sfc > magic-string > sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
warning "vite" is already in "devDependencies". Please remove existing entry first before adding it to "dependencies".
success Saved 24 new dependencies.
info Direct dependencies
├─ @vitejs/plugin-vue@4.0.0
├─ vite@4.1.1
└─ vue@3.2.47
info All dependencies
├─ @esbuild/darwin-arm64@0.16.17
├─ @vitejs/plugin-vue@4.0.0
├─ @vue/compiler-sfc@3.2.47
├─ @vue/reactivity-transform@3.2.47
├─ @vue/reactivity@3.2.47
├─ @vue/runtime-core@3.2.47
├─ @vue/runtime-dom@3.2.47
├─ @vue/server-renderer@3.2.47
├─ csstype@2.6.21
├─ esbuild@0.16.17
├─ function-bind@1.1.1
├─ has@1.0.3
├─ is-core-module@2.11.0
├─ nanoid@3.3.4
├─ path-parse@1.0.7
├─ picocolors@1.0.0
├─ postcss@8.4.21
├─ resolve@1.22.1
├─ rollup@3.15.0
├─ source-map-js@1.0.2
├─ sourcemap-codec@1.4.8
├─ supports-preserve-symlinks-flag@1.0.0
├─ vite@4.1.1
└─ vue@3.2.47
✨  Done in 21.12s.

npm 可以运行项目了

➤  npm run dev                                                                                                                                                                                                                                                        130 ↵

> image_search_web@0.0.0 dev
> vite


  VITE v4.1.1  ready in 591 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

但是直接在终端使用 vite 却是不行的

─➤  vite
zsh: command not found: vite

我在 project 下面搜索包含 vite 字样的文件

─➤  fd vite                                                                                                                      
public/vite.svg
vite.config.js

发现也没有 vite 的可执行文件

贴一下我的 package.json

{
  "name": "image_search_web",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.1.1"
  }
}

vite 为什么不能在终端直接运行？vite 不是一个可执行文件吗？

看到了 vite 的可执行文件了，因为在 .bin 下面，是一个隐藏文件夹，fd 命令默认不搜索隐藏文件夹下面的内容

╰─➤  fd -u vite 
node_modules/.bin/vite
node_modules/.vite/
node_modules/@vitejs/
node_modules/@vitejs/plugin-vue/node_modules/.bin/vite
node_modules/vite/
node_modules/vite/bin/vite.js
public/vite.svg
vite.config.js