局部安装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了
