vite创建的vue2项目打包后的文件结构分析

Vite 是一个现代化的前端构建工具，它以快速的开发体验为目标。Vite 创建的 Vue 项目在打包后的文件结构与传统的基于 webpack 的项目有所不同。

dist/
|-- assets/
|   |-- logo.12345.png
|-- css/
|   |-- app.12345.css
|-- js/
|   |-- app.12345.js
|-- index.html

dist 文件夹是打包输出的目录，包含了构建后的文件。一个 assets 文件夹存放图片等静态资源，一个 css 文件夹存放样式文件，一个 js 文件夹存放 JavaScript 文件，以及一个 index.html 文件作为入口 HTML。

• assets/: 用于存放项目中使用的静态资源，例如图片、字体等。
• css/: 存放构建后的 CSS 文件，通常是由多个样式文件合并压缩而来的。
• js/: 存放构建后的 JavaScript 文件，通常是由多个模块打包而成的。
• index.html: 项目的入口 HTML 文件，Vite 会自动注入构建后的资源链接。

Vite 利用了 ES 模块的特性，通过原生的 ES 模块导入方式来加载模块，这与传统的 CommonJS 或 AMD 导入方式有所不同，这也是 Vite 能够提供更快的开发和构建体验的原因之一。

Vite 在开发环境下不会像传统的 webpack 一样将所有模块打包到一个文件中，而是会通过 HTTP/2 Server Push 技术，在需要的时候按需加载模块。这使开发环境下的热更新更加高效。在生产环境下，Vite 会将模块进行预构建和优化，从而实现更快的加载速度。