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')}}})...
五、配置项目路径别名 5.1 路径别名 5.2 路径别名提示 六、样式模块化 七、Ant Design 安装 1. 安装 2. 按需引入 2.0.0 版本 更换了方法,需要安装 九、React 路由设置 1.旧版本 2.新版本 3.路由懒加载 十、侧边栏设置 十一、登录页面设置 状态管理 ...
import{defineConfig}from'vite'importreactfrom'@vitejs/plugin-react'// https://vitejs.dev/config/exportdefaultdefineConfig({+server:{+// 指定dev sever的端口号,默认为5173+port:3000,+},plugins:[react()],}) ※注:与基于webpack的Create-React-App不同,Vite修改项目配置后,不需要重启项目即可生效。
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":"...
这将会创建一个名为my-react-app的文件夹,并且基于React模板进行初始化。 3.进入新创建的项目文件夹。在命令行中运行以下命令来进入项目文件夹 cd my-react-app 4.最后,运行以下命令来安装项目依赖 npm install 或 yarn 5.启动 npm run dev 如何设置路径别名 ...
在React 项目中配置 Vite 可以显著提升开发效率,下面我将详细介绍如何安装 Vite 及其 React 插件、创建 React 项目的基本结构、配置 Vite 以支持 React 开发、测试配置是否成功,并提供一些可选的优化配置。 1. 安装 Vite 及其 React 插件 首先,你需要全局安装 create-vite(如果尚未安装),这是 Vite 提供的脚手架工...
配置路径别名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...
配置SSL证书，读取SSL证书文件的路径。 https: { key: fs.readFileSync("./public/.cert/key.pem"), cert: fs.readFileSync("./public/.cert/rootCA.pem"), }, // 代理服务器 proxy, },});配置项：base 指定基础路径。plugins Vite 插件数组，包含 React、Qiankun、TypeScript 校...
plugins: [react()] }; }); 1. 2. 3. 4. 5. 6. 7. base 开发或者生产环境服务的公共基础路径: mode mode就是指明模式,比如:development或者production,如果在vite.config.ts中配置的话,那么就会把serve和build模式下覆盖掉 plugin 应用需用用到的插件,是一个数组,因为应用中可能使用到很多插件。vite+reac...