Vue 打包

当你完成了 Vue 应用的开发，并且准备将其部署到线上服务器时，你需要对项目进行打包（也称为构建）。打包是一个过程，它会将你的源代码（.vue 文件、TypeScript/JavaScript 代码、CSS 等）转换成一组优化过的、静态的 HTML、CSS 和 JavaScript 文件，以便在浏览器中高效地运行。

为什么需要打包？

开发环境中的代码是为了可读性和可维护性而优化的，而生产环境中的代码是为了性能和浏览器兼容性而优化的。打包过程主要做了以下几件事：

1. 编译：将 .vue 单文件组件、TypeScript、Sass/Less 等浏览器不直接支持的语法编译成标准的 JavaScript 和 CSS。
2. 代码压缩 (Minification)：移除代码中不必要的字符，如空格、换行和注释，以减小文件体积。
3. 代码分割 (Code Splitting)：将应用代码分割成多个小块（chunks），实现按需加载，从而加快应用的初始加载速度。
4. Tree-shaking：移除项目中未被使用的代码，进一步减小打包后的文件大小。
5. 静态资源处理：处理图片、字体等静态资源，可能会进行压缩或 base64 编码。

如何打包你的 Vue 项目

使用官方脚手架 create-vue 创建的项目，已经为你预设好了打包命令。你只需要在项目根目录下运行：

npm run build

这个命令会调用底层的构建工具（通常是 Vite）来执行打包过程。

打包产物

打包完成后，你会在项目根目录下发现一个新生成的 dist 文件夹（"distribution" 的缩写）。这个文件夹包含了你的应用的所有静态产物，可以直接部署到任何静态文件服务器上。

dist 文件夹的典型结构如下：

dist/
├── assets/
│   ├── index.xxxx.js       # 主要的 JavaScript 代码
│   ├── index.xxxx.css      # 主要的 CSS 代码
│   └── ...                 # 其他被分割的 JS/CSS 或静态资源
├── favicon.ico
└── index.html              # 应用的入口 HTML 文件

• index.html 是你的单页应用的唯一入口。它已经自动引入了打包后的 CSS 和 JS 文件。
• assets 目录存放了所有的 JavaScript、CSS、图片、字体等资源。文件名中包含的哈希值（如 xxxx）是为了实现缓存控制。当你的代码更新后，文件名会改变，浏览器就会下载新文件而不是使用旧的缓存。

本地预览打包后的应用

在部署之前，你可能想在本地预览一下打包后的应用是否正常工作。Vite 提供了一个方便的命令：

npm run preview

这个命令会启动一个简单的静态文件服务器，将 dist 文件夹作为根目录。你可以在终端中看到的地址在浏览器中打开，来检查你的生产版本应用。