Vue3 项目打包

Vue3 项目打包技术文档

前言

在 Vue3 项目开发完成后，需要将其打包成生产环境可用的静态文件，本文将介绍如何使用 Vue Cli 4 工具进行项目打包，并对打包后文件做一个简要的分析。

安装 Vue Cli

在开始项目打包前，需要先安装 Vue Cli 工具，可以使用 npm 或 yarn 进行安装，命令如下：

npm install -g @vue/cli
// or
yarn global add @vue/cli

项目打包

使用 Vue Cli 工具进行项目打包非常方便，只需要运行一条命令即可，命令如下：

vue-cli-service build

在执行该命令前，需要先进入到项目目录下。执行完成后，在项目目录的 dist 文件夹中即可看到打包后的文件。

打包后文件分析

打开 dist 文件夹，可以看到以下文件：

index.html
css 目录
js 目录
img 目录

其中，index.html 是项目的入口文件，css、js、img 目录分别存放着打包后的样式文件、脚本文件和图片文件。

index.html 分析

index.html 文件中主要包含以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="/favicon.ico">
  <title>vue-project</title>
  <link href="/css/app.35c2618e.css" rel="stylesheet">
  <script src="/js/chunk-vendors.2b7bdb96.js"></script>
  <script src="/js/app.ecd4e700.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

其中，link 标签引入了打包后的样式文件，script 标签分别引入了打包后的第三方库和主应用程序脚本文件。div 元素的 id 属性为 app，是 Vue3 入口组件所渲染的挂载点。

css 目录分析

css 目录存放了打包后的样式文件，命名规则为 chunk-vendors.xxx.css 和 app.xxx.css，其中，chunk-vendors 文件是由第三方库打包生成的，app 文件是主应用程序打包生成的。这些文件包含着所有应用程序的样式代码。

js 目录分析

js 目录存放了打包后的脚本文件，命名规则和 css 目录相同，分别存放着第三方库和主应用程序的脚本代码。这些文件包含了应用程序中所有的脚本代码，并在 index.html 文件中通过 script 标签引用。

img 目录分析

img 目录存放了打包后的图片文件，这些文件是应用程序中使用到的所有图片文件，包括 Logo、背景图、轮播图等等。

总结

以上是关于 Vue3 项目打包的介绍，通过使用 Vue Cli 4 工具进行项目打包，可以将开发完成的项目打包成生产环境可用的静态文件。打包后的文件主要包括了 index.html、css、js、img 四个部分，其中，index.html 文件是项目的入口文件，其余三个部分分别存放着打包后的样式文件、脚本文件和图片文件。

Vue3 路由教程