首页react项目怎么配置vite

react项目怎么配置vite

时间: 2023-12-23 22:44:03 浏览: 96

要在React项目中使用Vite，需要按照以下步骤进行配置： 1. 安装Vite 在项目目录下执行以下命令安装Vite： ``` npm install vite --save-dev ``` 2. 配置Vite 新建一个`vite.config.js`文件，配置Vite的选项，例如： ``` module.exports = { root: './src', server: { port: 3000 } } ``` 这个配置将指定源文件目录为`./src`，并将服务器端口设置为3000。 3. 修改React项目的package.json文件在React项目的package.json文件中，将`start`命令修改为使用Vite启动开发服务器： ``` "scripts": { "start": "vite" } ``` 现在，可以使用`npm start`命令启动开发服务器。 4. 修改React项目的HTML文件在React项目的HTML文件中，将`<script>`标签中的`src`属性从`/path/to/bundle.js`改为`/src/main.jsx`，例如： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>React App</title> </head> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html> ``` 现在，React项目已经使用了Vite作为开发服务器，可以享受更快的重载和构建速度。

阅读全文