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')}}})...
配置路径别名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)...
vite.config.ts配置 // ...resolve: {// 配置别名alias: {'@': path.join(__dirname,'./src'),'@components': path.join(__dirname,'./src/components'),'@utils': path.join(__dirname,'./src/utils') } },// ... 配置tsconfig.json {"compilerOptions": {"target":"esnext","module":"...
在React 项目中配置 Vite 可以显著提升开发效率,下面我将详细介绍如何安装 Vite 及其 React 插件、创建 React 项目的基本结构、配置 Vite 以支持 React 开发、测试配置是否成功,并提供一些可选的优化配置。 1. 安装 Vite 及其 React 插件 首先,你需要全局安装 create-vite(如果尚未安装),这是 Vite 提供的脚手架工...
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,...
ts对@指向src目录的提示是不支持的,vite默认也是不支持的。 所以需要手动配置@符号的指向,找到vite.config.ts import path from "path" // Vite export default defineConfig({ plugins: [react()], resolve:{ alias:{ "@":path.resolve(__dirname,'./src') } } }) 2 path模块是node.js内置的功能,但...
查看 create-vite 以获取每个模板的更多细节:vanilla,vanilla-ts, vue, vue-ts,react,react-ts,react-swc,react-swc-ts,preact,preact-ts,lit,lit-ts,svelte,svelte-ts。区分开发环境,测试环境和生产环境 首先在项目根目录下创建.env文件,Vite 使用 dotenv 从你的 环境目录 中的下列文件加载额外的...
五、配置项目路径别名 5.1 路径别名 5.2 路径别名提示 六、样式模块化 七、Ant Design 安装 1. 安装 2. 按需引入 2.0.0 版本 更换了方法,需要安装 九、React 路由设置 1.旧版本 2.新版本 3.路由懒加载 十、侧边栏设置 十一、登录页面设置 状态管理 ...
import'@jdcfe/yep-react/dist/@jdcfe/yep-react.css'; 目前的m.css静态资源的大小为166.85kb,那么下面我们进行一次瘦身,使用按需加载的方法,那么这里我们需要一个插件 npmivite-plugin-imp -D 然后进行配置: importreactRefreshfrom'@vitejs/plugin-react-refresh'importpathfrom'path'import{ defineConfig }from...