coder_sunshine

在控制台执行 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参数 根据环境变量的不同值区分不同的环境