#vite介绍
vite是一款现代化开发构建工具，开发环境通过esbuild进行预构建，基于浏览器es module导入代码，生产环境通过rollup进行打包
#安装
npm init vite@latest <project-name>
选择自己要安装的选项，这里都选vue，这里的vue版本默认是vue3
#目录结构
这里可以看到index.html文件放在了根目录，main.js文件放在src里，（使用绝对路径引入），引入方式采用esm 的方式，所以在开发环境使用vite开发是有浏览器的版本要求的，需要使用支持esm的浏览器进行开发
对于资源引入方面，因为vite是通过分析文件后缀名来确定如何处理文内容的，所以相对路径的资源引入需要加上后缀名
- vite通过postcss-import预置了css的@import内联，vite设置的别名也支持使用
- 项目中如果有postcss 的配置文件会自动应用，（autoprefixer使用注意点，单纯配置autoprefixer：{}无效，需配置支持的浏览器overrideBrowserslist） 3.任何以xxx.module.css为后缀名的文件将会被处理为css modules文件，导入这样的文件会返回相应的模块对象（可以导出对象，但是只支持类名） 4.css预处理器，预处理器的使用只需要安装对应处理器即可使用 5.通过相对路径或者绝对路径引入静态资源（src里的文件），public文件下的静态资源会被原样拷贝到发布目录的更目录下，所以需要用绝对路径引入
// 相对<img alt="Vue logo" src="./assets/logo.png" /> // 绝对<img src="/src/assets/logo.png">
#vite配置文件
1.别名设置 resolve.alias
2.代理设置 server.proxy
3.环境变量
环境变量的设置可以通过.env.xxx文件设置，也可以在执行script命令的时候指定 vite serve 默认是development，vite build 默认是production 也可以手动指定
配置项命名需要以VITE_开头，例：VITE_KEY = 13才会被识别
通过import.meta.env.xxx读取配置内容
4.插件支持 jsx支持：安装@vitejs/plugin-vue-jsx插件
vue文件中使用jsx需要设置script语言
