一、让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":...
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内置的功能,但...
npm create vite@latest vite-react-ts --template react-ts 创建项目,使用vscode开发项目。 (2022年7月15日,现在用vite创建项目,默认是react18) 出现问题 1.编译器不认识路径别名"@" 解决方法: 找到项目根目录的tsconfig.json,在compilerOptions下增加 "baseUrl": ".", "paths": { "@/*": ["src/*"]...
1. 修改vite.config.ts和tsconfig.json配置 就各种修改关于路径别名的配置,从git上找了好多种,最终除了怀疑自己,啥效果没有😵 // vite.config.ts function pathResolve(dir: string) { return resolve(process.cwd(), '.', dir) } resolve: { alias: [ { find: '@', replacement: pathResolve('src'...
// 根据提示选择配置即可 vite 提供的选项很少,只有 react 或 react + ts 2、配置环境变量 vite 提供了开发模式和生产模式 这里我们可以建立 4 个.env文件,一个通用配置和三种环境:开发、测试、生产。 env文件中的变量名建议以VITE_APP开头,和vue cli中的VUE_APP相同 ,用法也一致 ...
mobx/6.x + react + TypeScript 最佳实践 想快速了解 Vite 配置构建的,可以直接跳到 这里 初始化项目 这里我们项目名是 fe-project-base这里我们采用的 vite 2.0 来初始化我们的项目 npm init @vitejs/app fe-project-base --template react-ts 这个时候,会出现命令行提示,咱们按照自己想要的模板,选择对...
查看 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 从你的 环境目录 中的下列文件加载额外的...
配置路由/界面 新建layouts组件,主要用于区别渲染登录注册页面与布局界面: layouts/BasicLayout.tsx、layouts/UserLayout.tsx 这里就不一一做展示了,详细代码见仓库,地址贴在下面了。 新建路由配置文件router/index.ts: importReactfrom'react';constPage404=React.lazy(() =>import('../pages/404'));constHome=Reac...