vite学习

在控制台执行 yarn build。 打包完后如下，我们可以使用 live server 打开 可以发现已经报错了，这是为什么呢

路径别名配置 这样就可以用路径别名来引入资源了。 alias 原理 alias 的大致原理就是 node 在读取文件的时候，遇到配置过的路径别名会在解析的时候去替换，把字符串路径替换成对应的就行了，具

对图片的处理 对于图片，有两种引入方式，一种是直接引入就行，直接引入的默认为后缀加上 ?url，另外一种引入方式是在后缀加上 ?raw，这种方式引入的是 buffer 文件。 对 json 文件的处理

vite天生就对postcss有着很好的支持 postcss 执行原理 postcss 就好比一个全屋净水系统

modules 对 css modules 的 vite 配置。 css预处理器 配置less或者sass

对css的处理 可以看到 vite 天生就支持对 css 文件的直接处理，处理流程大概如下： vite 在 main.js 中读取到引用的 index.css 直接使用fs模块读取 index.css

可以在 network 中看到浏览器直接加载了 App.vue 这个文件，那么为什么可以直接加载 App.vue 呢

环境变量 环境变量通常可以从 process.env 获得。 注意 Vite 默认是不加载 .env 文件的，因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个

vite配置语法提示 vite.config.js 上面两种方法都是可以的。 区分环境 defineConfig 里面的回调函数可以解构出一个command参数 根据环境变量的不同值区分不同的环境

vite启动项目 可以看到浏览器支持 ESModule 规范，但是当我们引入 lodash 看看呢？ 可以发现直接报错了，提示我们只能通过绝对路径或者相对路径去查找模块，那么为什么浏览器不直接帮我们从

在使用这些命令时候，例如 yarn create vite 会自动在全局帮我们安装 create-vite 脚手架，然后直接运行这个 create-vite bin 目录下的一个配置。 这里有一个误区

下面是 vite 官网的一段话 起因：我们的项目越来越大 ---> 构建工具 ( webpack ) 需要处理的 js 代码越来越多，这跟 webpack 的构建过程有关。 结果：构建工具需要很长的时

什么是构建工具？ 一般项目会具备的一些功能 typescript：如果遇到 ts 文件我们需要使用 tsc 将其转化为 js文件 React/Vue：安装 react-compile / vue-co