vite+react简单搭建

局部安装vite

npm install vite -D

全局安装vite

npm install vite -g

使用

npm init vite@latest
//选择react（windows使用gitbush无法选择时，使用cmd执行）

安装完成之后运行：

cd vite-project
npm install
npm run dev

image.png

可以配置.env的开发环境、测试环境、生产环境

image.png

配置路径别名vite.config.js

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

import url from 'url';
import path from 'path'
//声明变量__filename，__dirname会报错，改为__filename2，__dirname2
const __filename2 = url.fileURLToPath(import.meta.url);
const __dirname2 = path.dirname(__filename2);
console.log(__filename2);
console.log(__dirname2);
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    //配置别名 @为src 引入
    alias: {
      '@': path.resolve(__dirname2, 'src')
    }
  }
})

接着新建一个Home.jsx文件，并在App.jsx中引入

import React from 'react';
class Home extends React.Component{
    render(){
        return <h2 style={{color: 'red'}}>Hello, Home</h2>
    }
}

export default Home

App.jsx（这里去掉了一些无用的代码）

import reactLogo from './assets/react.svg'
import './App.css'
import Home from '@/pages/Home'

function App() {
  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg" className="logo" alt="Vite logo" />
        </a>
        <a href="https://reactjs.org" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <Home></Home>
    </div>
  )
}

export default App

image.png

到这里，最基础的vite+react搭建就ok了