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.config.ts 中添加相关的别名配置。以下是示例: // vite.config.tsimport{defineConfig}from'vite';importreactfrom'@vitejs/plugin-react';import{resolve}from'path';exportdefaultdefineConfig({plugins:[react()],resolve:{alias:{'@':resolve(__dirname,'src'),// 将 @ 指向 src 目录},...
在React Vite项目中,@别名主要用于简化文件路径的引用。例如,如果你的项目结构很深,使用相对路径引用文件可能会变得非常冗长。通过配置@别名,你可以将@指向项目的某个特定目录(如src目录),从而在项目中更方便地引用该目录下的文件。 2. 在Vite配置文件中设置别名@ 要在Vite配置文件中设置@别名,你需要修改vite.confi...
// 根据提示选择配置即可 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 ...
配置路径别名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...
查看 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 从你的 环境目录 中的下列文件加载额外的...
然后进行配置: 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'), ...
打开根目录,参考vite官网,进行配置文件vite.config.js,比如 别名、less、proxy跨域代理 这些常用的配置项。 三、路由 参考react-router-dom-v6官网:https://reactrouter.com/docs/en/v6 (1) 安装路由包:yarn add react-router-dom@6 (2) 项目入口文件不变 ...