使用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>
現在可以瀏覽你的頁面了
