一、让vite做路径解析 1、安装第三方Node包 npm i @types/node -D 2、配置别名路径 image.png import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import path from 'path' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], resolve: ...
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":"...
React18+Vite+Ts+redux 生成一个vite+react+ts的项目 执行命令 npm create vite 选择react 选择ts cd vite-project //安装依赖 npm install //启动项目 npm run dev ts以及vite的一些配置 根目录下的tsconfig.json配置ts { "compilerOptions": { "target": "ES2020",//指定 ECMAScript 目标版本,如 "ES3"...
// 根据提示选择配置即可 vite 提供的选项很少,只有 react 或 react + ts 2、配置环境变量 vite 提供了开发模式和生产模式 这里我们可以建立 4 个.env文件,一个通用配置和三种环境:开发、测试、生产。 env文件中的变量名建议以VITE_APP开头,和vue cli中的VUE_APP相同 ,用法也一致 ...
vite.config.ts // vite.config.ts{ resolve: { alias: { '@/': path.resolve(__dirname, './src'), '@/config': path.resolve(__dirname, './src/config'), '@/components': path.resolve(__dirname, './src/components'), '@/styles': path.resolve(__dirname, './src/styles'), '@...
npm init @vitejs/app vite-react-ts-antd-starter --template react-ts # npm 7+, 需要额外的双横线: npm init @vitejs/app vite-react-ts-antd-starter -- --template react-ts 创建完安装依赖后,运行项目如图: 配置路由 npm i react-router-dom@5.3.0 ...
配置vite.config.ts exportdefaultdefineConfig((mode:ConfigEnv):UserConfig=>{constenv=loadEnv(mode.mode,process.cwd());constviteEnv=wrapperEnv(env);return{resolve:{alias:{"@":resolve(__dirname,"./src"),},},css:{preprocessorOptions:{less:{javascriptEnabled:true,additionalData:`@import "@/styl...
此文主要以ts+vite+router6+antd 快速搭建一个react项目,适用于初学者 一、项目搭建 采用pnpm,个人感觉比npm和yarn好用 npm i pnpm -g 1. 采用vite方式 ,根据选择 react-ts pnpm create vite 1. 1.1 修改初始结构,删除多余文件 1.2 修改vite.config配置文件 配置别名 ...
配置路由/界面 新建layouts组件,主要用于区别渲染登录注册页面与布局界面: layouts/BasicLayout.tsx、layouts/UserLayout.tsx 这里就不一一做展示了,详细代码见仓库,地址贴在下面了。 新建路由配置文件router/index.ts: importReactfrom'react';constPage404=React.lazy(() =>import('../pages/404'));constHome=Reac...