在已有的React项目中引入Vite

Vite官网

        https://vitejs.cn/vite3-cn/guide/why.html

        官网的示例是通过vite去创建项目,那么如果在已有的项目中想要使用vite来达到快速启动呢

        查看了很多人写的文档+自己实际试了一下,是实现了vite的横插一脚

示例

        1.首先我用react脚手架初始化了一个项目

        2.安装依赖

yarn add vite     //安装vite依赖
yarn add @vitejs/plugin-react    

        3.就像vite初始化项目一样,在根目录下创建一个index.html文件,引入渲染的主文件,目录结构如下

        4.添加一个vite.config.js文件(内容就和创建vite项目时候生成的文件内容一样即可)

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {   //兼容less文件,antd<5.x版本以前自定义主题会遇到这个问题
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,  
      }
    },
  },
})

        5.命令启动,yarn  vite即可

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值