如何使用create-vite初始化Vite v2 React项目？含npm/yarn方案

问题原因 #

你使用npm init vite@2.9.5生成项目后出现Vite v3依赖，大概率是因为create-vite@2.9.5的React模板中，vite的版本范围设置允许兼容更高版本，或者npm依赖解析时自动拉取了最新兼容版本。以下是两种可行的解决方式，同时提供Yarn的实现方案。

使用npm解决的两种方法 #

方法1：生成项目后手动锁定Vite版本 #

1. 执行原命令生成项目结构：

   npm init vite@2.9.5 vite2app -- --template react
   

2. 进入项目目录：

   cd vite2app
   

3. 打开package.json，将"vite": "^3.1.0"修改为Vite v2的最新稳定版（比如"vite": "^2.9.16"），同时确保@vitejs/plugin-react版本匹配（对应Vite v2的插件版本为^1.3.2）
4. 重新安装依赖：

   npm install
   

方法2：手动创建项目并指定依赖版本 #

如果不想受限于create-vite的模板限制，可以手动搭建项目：

1. 创建项目目录并进入：

   mkdir vite2app && cd vite2app
   

2. 初始化package.json：

   npm init -y
   

3. 安装Vite v2及对应React插件：

   npm install vite@^2.9.16 @vitejs/plugin-react@^1.3.2 --save-dev
   npm install react react-dom
   

4. 添加必要的项目文件：
   • 创建index.html：

     <!DOCTYPE html>
     <html lang="en">
       <head>
         <meta charset="UTF-8" />
         <link rel="icon" type="image/svg+xml" href="/vite.svg" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Vite + React</title>
       </head>
       <body>
         <div id="root"></div>
         <script type="module" src="/src/main.jsx"></script>
       </body>
     </html>
     

   • 创建src/main.jsx：

     import React from 'react'
     import ReactDOM from 'react-dom/client'
     import App from './App'
     import './index.css'
     
     ReactDOM.createRoot(document.getElementById('root')).render(
       <React.StrictMode>
         <App />
       </React.StrictMode>,
     )
     

   • 创建src/App.jsx和src/index.css，内容与create-vite生成的默认结构一致即可
   • 创建vite.config.js：

     import { defineConfig } from 'vite'
     import react from '@vitejs/plugin-react'
     
     export default defineConfig({
       plugins: [react()]
     })
     

使用Yarn实现的两种方法 #

方法1：通过yarn create生成后修改版本 #

1. 执行命令生成项目：

   yarn create vite@2.9.5 vite2app --template react
   

2. 进入项目目录：

   cd vite2app
   

3. 修改package.json中的vite和插件版本为Vite v2兼容版本（同npm方法1）
4. 重新安装依赖：

   yarn install
   

方法2：手动搭建项目 #

1. 创建目录并初始化：

   mkdir vite2app && cd vite2app
   yarn init -y
   

2. 安装依赖：

   yarn add vite@^2.9.16 @vitejs/plugin-react@^1.3.2 --dev
   yarn add react react-dom
   

3. 添加项目文件（同npm方法2的文件结构）

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