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
文件是项目的入口文件,其余三个部分分别存放着打包后的样式文件、脚本文件和图片文件。