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: { alias: { '@': path.resolve(__dirname,...
1. 配置vite.config.ts Vite 默认支持通过 alias 来配置路径别名。我们需要在 vite.config.ts 中添加相关的别名配置。以下是示例: // vite.config.tsimport{defineConfig}from'vite';importreactfrom'@vitejs/plugin-react';import{resolve}from'path';exportdefaultdefineConfig({plugins:[react()],resolve:{alias...
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":...
查看 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 从你的 环境目录 中的下列文件加载额外的...
使用最简单的方法创建一个应用:yarn create vite,然后选择react框架。 vite默认配置是使用了defineConfig工具函数: import { defineConfig } from 'vite' export default defineConfig({ // ... }) 1. 2. 3. 4. 不管是js还是ts,都可以直接使用defineConfig工具函数,如果需要基于dev、serve或者...
--template后面紧跟的是vue react的脚手架模板 模板列表：vanilla，vanilla-ts,vue,vue-ts，react，react...
(根据提示,确定项目名称、选择框架react、选择react还是react-ts ) cd项目名称// 进入项目根目录 yarn// 安装依赖包 yarn dev// 运行 注释:项目初始化后src中的目录很简单,自己可以按照自己的风格设置子目录结构,例如下面: 二、配置 打开根目录,参考vite官网,进行配置文件vite.config.js,比如 别名、less、proxy跨...
2. 在Vite配置文件中设置别名@ 要在Vite配置文件中设置@别名,你需要修改vite.config.js或vite.config.ts文件。以下是一个示例配置: javascript // vite.config.js 或 vite.config.ts import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import path from 'path'; export def...