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

2024-03-22 07:30:03
开发
17

使用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>

現在可以瀏覽你的頁面了

在这里插入图片描述

原文地址:https://blog.csdn.net/Dongfang_project/article/details/136899359 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1770956061969354752.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部