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 

Hello, Home

} } export default Home

App.jsx(这里去掉了一些无用的代码)

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

function App() {
  return (
    

Vite + React

) } export default App
image.png

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

你可能感兴趣的:(vite+react简单搭建)