构建产品

将应用程序部署到生产环境首先要创建可部署的工件。就 Vue.js 而言，我们正在构建一个客户端应用程序，这意味着我们的构建工件将包含 HTML、JavaScript 和 CSS 文件。

Vue CLI 附带一个 build 命令。该 build 命令会将我们的 Vue.js 单文件组件（.vue 文件）编译成渲染函数（Vue 运行时可用于渲染应用程序的 JavaScript 函数），并输出为 JavaScript。

作为构建过程的一部分，Vue CLI 会将 JavaScript、Vue 单文件组件和相互导入的模块进行捆绑。捆绑意味着，相互依赖的相关代码块将作为单个 JavaScript 文件输出。

由于我们使用了 Vue CLI，Vue.js 库本身也可以瘦身。Vue.js 运行时捆绑包可以包含一个运行时编译器，它可以获取字符串模板并将其转化为客户端的渲染函数。由于我们将在构建时使用 Vue CLI 编译为渲染函数，因此 Vue.js 的这一部分无需包含在我们的 JavaScript 中。

Vue CLI 构建步骤还包括消除死代码步骤。这意味着它可以分析生成的代码，如果其中有明显从未使用过的代码，例如 if (false) { /* do something */} 这样的语句，那么它将不会出现在 Vue.js 中。- 那么它就不会出现在构建输出中。

默认情况下，当我们调用 vue service build（在 Vue CLI 项目中别名为构建脚本）时，Vue CLI 会为生产进行构建。

在一个示例 Vue CLI 项目中，我们会看到如下内容：

dist 文件夹现在可以使用静态托管解决方案（例如 Netlify 或 AWS S3 和 CloudFront）进行部署。

我们现在已经了解了如何使用 Vue CLI 和 npm run build 命令构建用于生产的 Vue.js 应用程序。

接下来，我们将了解如何使用 GitLab CI/CD 来测试我们的代码（在部署之前）。