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

使用Vite作為開發依賴

安裝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.jsxmain.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>

現在可以瀏覽你的頁面了

相关推荐
LuciferHuang6 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing6 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20156 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言7 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手7 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言8 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
hackchen8 小时前
Go与JS无缝协作:Goja引擎实战之错误处理最佳实践
开发语言·javascript·golang
你的人类朋友9 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手9 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3