React腳手架已經創建好了，想使用Vite作為開發依賴

東方幻想郷2024-03-22 13:34

使用Vite作為開發依賴

安裝VITE
配置VITE配置文件
簡單的VITE配置項
更改package.json中的scripts
在根目錄中添加index.html
現在可以瀏覽你的頁面了

安裝VITE

首先，在現有的React項目中安裝VITE

js 复制代码

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

配置VITE配置文件

js 复制代码

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

簡單的VITE配置項

記住安裝一下 @vitejs/plugin-react 包

js 复制代码

yarn add @vitejs/plugin-react --dev

js 复制代码

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

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

更改package.json中的scripts

js 复制代码

// ... 

  "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

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>

React腳手架已經創建好了，想使用Vite作為開發依賴

使用Vite作為開發依賴

安裝VITE

配置VITE配置文件

簡單的VITE配置項

更改package.json中的scripts

在根目錄中添加index.html

現在可以瀏覽你的頁面了