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配置 // ...resolve: {// 配置别名alias: {'@': path.join(__dirname,'./src'),'@components': path.join(__dirname,'./src/components'),'@utils': path.join(__dirname,'./src/utils') } },// ... 配置tsconfig.json {"compilerOptions": {"target":"esnext","module":"...
yarn create vite // 根据提示选择配置即可 vite 提供的选项很少,只有 react 或 react + ts 2、配置环境变量 vite 提供了开发模式和生产模式 这里我们可以建立 4 个.env文件,一个通用配置和三种环境:开发、测试、生产。 env文件中的变量名建议以VITE_APP开头,和vue cli中的VUE_APP相同 ,用法也一致 .env文件 ...
使用最简单的方法创建一个应用:yarn create vite,然后选择react框架。 vite默认配置是使用了defineConfig工具函数: import { defineConfig } from 'vite' export default defineConfig({ // ... }) 1. 2. 3. 4. 不管是js还是ts,都可以直接使用defineConfig工具函数,如果需要基于dev、serve或者b...
在React Vite项目中,@别名主要用于简化文件路径的引用。例如,如果你的项目结构很深,使用相对路径引用文件可能会变得非常冗长。通过配置@别名,你可以将@指向项目的某个特定目录(如src目录),从而在项目中更方便地引用该目录下的文件。 2. 在Vite配置文件中设置别名@ 要在Vite配置文件中设置@别名,你需要修改vite.confi...
• 7.2 配置二级路由 8 React Developer Tools浏览器插件 9 Redux及Redux Toolkit • 9.1 安装Redux及Redux Toolkit • 9.2 创建全局配置文件 • 9.3 创建用于主题换肤的store分库 • 9.4 创建store总库 • 9.5 引入store到项目 • 9.6 store的使用:实现亮色/暗色主题切换 ...
然后进行配置: 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.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 从你的 环境目录 中的下列文件加载额外的...