1、安装第三方Node包 npm i @types/node -D 2、配置别名路径 image.png import{defineConfig}from'vite'importreactfrom'@vitejs/plugin-react'importpathfrom'path'// https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[react()],resolve:{alias:{'@':path.resolve(__dirname,'./src')}}})...
在React 项目中配置 Vite 可以显著提升开发效率,下面我将详细介绍如何安装 Vite 及其 React 插件、创建 React 项目的基本结构、配置 Vite 以支持 React 开发、测试配置是否成功,并提供一些可选的优化配置。 1. 安装 Vite 及其 React 插件 首先,你需要全局安装 create-vite(如果尚未安装),这是 Vite 提供的脚手架工...
命令行界面 package.json 3、配置alias别名 @ 配置别名 像vue cli一样 以@引入文件 如果path或者__dirname报红,需要安装支持@types/node到本地 npm i @types/node -D vite.config.js 配置了@别名之后去引入文件发现没有智能提示,需要根目录添加一个jsconfig.json文件 { "compilerOptions": { "baseUrl": "...
配置别名 export default defineConfig({ resolve:{ alias:{ '@': resolve(__dirname, 'src')//配置别名 } }})打包速度的问题 vite在打包中会计算包的大小，但是只是计算不做处理，会长打包时间，所以可以在build中再添加一个配置项关闭打包计算。启用/禁用 gzip 压缩大小报告。压缩大型输出文件可...
我们先从项目基本配置(安装、样式、组件库、代理和环境变量)开始: 1.安装 npminit@vitejs/app 然后根据指引一步步选择react + ts 2.css预处理器的配置 Vite 提供了对.scss,.sass,.less,.styl和.stylus文件的内置支持。没有必要为它们安装特定的 Vite 插件,但必须安装相应的预处理器依赖。
vite.config.ts配置 // ...resolve: {// 配置别名alias: {'@': path.join(__dirname,'./src'),'@components': path.join(__dirname,'./src/components'),'@utils': path.join(__dirname,'./src/utils') } },// ... 配置tsconfig.json ...
Vite 的配置文件是 vite.config.js（或 vite.config.ts），位于项目根目录。以下是一个典型的配置文件示例：4. 常用插件 Vite 的插件系统非常强大，以下是一些常用插件：4.1 Vue 支持 在 vite.config.js 中配置：4.2 React 支持 在 vite.config.js 中配置：4.3 TypeScript 支持 Vite 默认支持 TypeScript，...
配置路径别名vite.config.js import{defineConfig}from'vite'importreactfrom'@vitejs/plugin-react'importurlfrom'url';importpathfrom'path'//声明变量__filename,__dirname会报错,改为__filename2,__dirname2const__filename2=url.fileURLToPath(import.meta.url);const__dirname2=path.dirname(__filename2...
配置路由/界面 新建layouts组件,主要用于区别渲染登录注册页面与布局界面: layouts/BasicLayout.tsx、layouts/UserLayout.tsx 这里就不一一做展示了,详细代码见仓库,地址贴在下面了。 新建路由配置文件router/index.ts: importReactfrom'react';constPage404=React.lazy(() =>import('../pages/404'));constHome=Reac...