一、让vite做路径解析 1、安装第三方Node包npm i @types/node -D2、配置别名路径 二、让vscode做智能路径提示
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"...
npm init @vitejs/app vite-react-ts-antd-starter -- --template react-ts 创建完安装依赖后,运行项目如图: 配置路由 npm i react-router-dom@5.3.0 由于v6目前试用ts提示等有一些问题,避免讲解复杂还是直接简单点用v5版本,用法不变。 首先新建三个页面文件,在src/pages文件夹下新建三个页面 ...
// 根据提示选择配置即可 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'), '@...
配置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...
1.编译器不认识路径别名"@" 解决方法: 找到项目根目录的tsconfig.json,在compilerOptions下增加 "baseUrl": ".", "paths": { "@/*": ["src/*"] } 2.vite编译时不认识路径别名"@" 需要在vite.config.ts中plugin、server同级设置一个resolve
配置路由/界面 新建layouts组件,主要用于区别渲染登录注册页面与布局界面: layouts/BasicLayout.tsx、layouts/UserLayout.tsx 这里就不一一做展示了,详细代码见仓库,地址贴在下面了。 新建路由配置文件router/index.ts: importReactfrom'react';constPage404=React.lazy(() =>import('../pages/404'));constHome=Reac...