Vue 3 打包项目

更新时间 2023-04-06 21:39:56

一则或许对你有用的小广告

最近,小哈正在带小伙伴们做前后端分离博客项目,采用技术栈 Spring Boot + Mybatis Plus + Vue 3.2 + Vite 4手把手,前端 + 后端,全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已进入第七章 《文章分类模块开发》中,截止到目前,已更新 105150 字,69 篇内容,讲解图:521 张,还在持续爆肝中,后续还会上新更多项目,已有 200+ 小伙伴加入,欢迎点击围观

前言

大家好,我是小哈~

上小节 中,我们已经学会了如何启动一个 Vue 项目。本小节中,我们将学会怎么将一个 Vue 项目打包编译成静态文件。

打包项目

首先,通过命令行进入到项目所在目录中,当需要将 Vue 项目打包发布到生产环境时,执行如下命令:

npm run build

打包 Vue 项目打包 Vue 项目

执行成功后,会在项目文件夹中看到多了一个 dist 文件夹:

该文件下放置的就是编译后的静态文件,如 htmlcssjs 等相关文件:

Vue 项目编译后的文件Vue 项目编译后的文件

至此,该 Vue 项目就打包好了。