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')}}})...
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内置的功能,但...
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":...
import react from '@vitejs/plugin-react' import { resolve } from 'path' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()],//插件 resolve: {//解析 alias: {//别名 这些别名在项目的代码中可以用作简化导入路径的方式 '@': resolve(__dirname, 'src'), '@uti...
查看 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 从你的 环境目录 中的下列文件加载额外的...
plugins: [react()] }; }); 1. 2. 3. 4. 5. 6. 7. base 开发或者生产环境服务的公共基础路径: mode mode就是指明模式,比如:development或者production,如果在vite.config.ts中配置的话,那么就会把serve和build模式下覆盖掉 plugin 应用需用用到的插件,是一个数组,因为应用中可能使用到很多插件。vite+reac...
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'...
--template后面紧跟的是vue react 的脚手架模板 模板列表：vanilla，vanilla-ts,vue,vue-ts，react，...
react+vite+ts 项目新建方式: npm create vite@latest my-app---templatereact-ts 问题: 用这种方式新建的react项目,在配置了@声明后,一直不生效。 报错 找不到模块“@/xxxxxx”或其相应的类型声明 image.png 通过查询,因为是ts报错,所以需要在tsconfig.json中增加配置,一般的方式为: /...