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.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":"...
vite + react项目搭建 基于vite 的搭建基础模板 1、创建基本模板项目 2、配置环境变量 3、配置alias别名 @ 4、配置proxy代理 5、安装Ant design 按需引入 下一篇文章记录 react-router-dom V6使用及路由拦截 附录 关于react函数组件中初始化会调用两次。
查看 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.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...
然后进行配置: 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'), ...
Vue.js:Vite对Vue.js有原生的支持。在创建新的Vue项目时,可以选择使用Vite作为脚手架工具,并自动集成了Vue的开发环境和构建配置。你可以通过以下命令创建一个基于Vue.js的Vite项目: npm init vite@latest my-vue-app --template vue React:Vite也可以用于React项目的开发。类似于Vue.js,你可以使用Vite CLI来创建...