React脚手架已经创建好了，想使用Vite作为开发依赖

那云散了

已于 2024-05-28 11:24:07 修改

阅读量511

点赞数 2

分类专栏： React | 前端框架文章标签： react.js 前端 javascript

于 2024-03-21 11:45:48 首次发布

本文链接：https://blog.csdn.net/Dongfang_project/article/details/136899359

版权

React | 前端框架专栏收录该内容

10 篇文章 0 订阅

订阅专栏

使用Vite作为开发依赖

安装VITE
配置VITE配置文件
简单的VITE配置项
更改package.json中的scripts
在根目录中添加index.html
现在可以浏览你的页面了

安装VITE

首先，在现有的React项目中安装VITE

npm install vite --save-dev
||
yarn add vite --dev

配置VITE配置文件

my-react-vite-app/
├── node_modules/
├── public/
├── src/
├── package.json
├── vite.config.js -- 添加VITE配置目录
└── README.md

简单的VITE配置项

记住安装一下 @vitejs/plugin-react 包

yarn add @vitejs/plugin-react --dev

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  }
  // 其他配置选项
});

更改package.json中的scripts

// ... 

  "scripts": {
    "start": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },

// ...

在根目录中添加index.html

指向的是你的 index.jsx 或 main.jsx

<!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>