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')}}})...
// 根据提示选择配置即可 vite 提供的选项很少,只有 react 或 react + ts 2、配置环境变量 vite 提供了开发模式和生产模式 这里我们可以建立 4 个.env文件,一个通用配置和三种环境:开发、测试、生产。 env文件中的变量名建议以VITE_APP开头,和vue cli中的VUE_APP相同 ,用法也一致 .env文件 通用配置 用来配置...
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":"...
在React Vite项目中,@别名主要用于简化文件路径的引用。例如,如果你的项目结构很深,使用相对路径引用文件可能会变得非常冗长。通过配置@别名,你可以将@指向项目的某个特定目录(如src目录),从而在项目中更方便地引用该目录下的文件。 2. 在Vite配置文件中设置别名@ 要在Vite配置文件中设置@别名,你需要修改vite.confi...
配置路径别名vite.config.js import{defineConfig}from'vite'importreactfrom'@vitejs/plugin-react'importurlfrom'url';importpathfrom'path'//声明变量__filename,__dirname会报错,改为__filename2,__dirname2const__filename2=url.fileURLToPath(import.meta.url);const__dirname2=path.dirname(__filename2...
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内置的功能,但...
查看 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 从你的 环境目录 中的下列文件加载额外的...
Vite 的配置文件是 vite.config.js（或 vite.config.ts），位于项目根目录。以下是一个典型的配置文件示例：4. 常用插件 Vite 的插件系统非常强大，以下是一些常用插件：4.1 Vue 支持 在 vite.config.js 中配置：4.2 React 支持 在 vite.config.js 中配置：4.3 TypeScript 支持 Vite 默认支持 TypeScript，...
然后进行配置: importreactRefreshfrom'@vitejs/plugin-react-refresh'importpathfrom'path'import{ defineConfig }from'vite'importvitePluginImpfrom'vite-plugin-imp'// https://vitejs.dev/config/exportdefaultdefineConfig({resolve: {alias: {'@': path.resolve(__dirname,'src'), ...