Vue 3 30天精进之旅：Day 22 - 构建和部署

embedded/2025/2/19 9:59:15/

欢迎回来！在我们的Vue 3学习旅程的第22天，我们将探讨应用的构建和部署。在完成了我们的应用开发后，下一步就是如何将其部署到服务器，使得用户可以访问。

1. 构建Vue应用

构建Vue应用是将我们在本地开发的代码打包成生产环境可用的格式。在这个过程中，Vue CLI会对我们的代码进行一些优化，为我们的应用提供更好的性能和更快的加载速度。接下来，我们将详细了解构建Vue应用的步骤，以及每一步的具体操作和背后的原理。

1.1 安装依赖

在构建应用之前，确保你的开发环境已经配置好，并且所有的依赖项都已经安装。通常在创建Vue项目时，使用Vue CLI生成项目模板时，依赖项会自动安装。如果你在项目前途上进行了新的依赖开发，需要执行以下命令来安装项目所需的所有依赖：

npm install

此命令会根据项目根目录下的package.json文件，自动下载和安装所有列出的依赖包。这些依赖包包括Vue、Vue Router、Vuex及其他可能需要的库。

1.2 进行构建

当所有依赖安装完毕后，我们就可以开始构建我们的应用了。Vue CLI提供了一个内置命令来创建生产版本的应用，命令如下：

npm run build

1.2.1 命令解释

当你运行npm run build时，Vue CLI会自动执行在package.json文件中的build脚本。这通常是由Webpack构建工具配置的，Webpack会通过以下方式来处理你的应用：

  • 代码压缩： Webpack会对JavaScript和CSS代码进行压缩，减少文件大小，提升加载速度。
  • 树摇优化： Webpack会删除未使用的代码，提高应用性能。

1.2.2 查看构建过程

在命令行中执行npm run build后，你会看到构建过程的详细日志。Webpack会显示哪些文件被处理，生成了多少个输出文件等信息。这些输出文件在完成构建后会存储在dist目录中。

1.3 理解构建输出

一旦构建完成，你将在项目根目录下看到一个 dist 文件夹，里面保存着所有构建后的文件。这些文件是生产环境使用的，所以理解它们的结构是非常重要的。

1.3.1 dist 文件夹结构

dist 文件夹通常包含以下文件和目录：

txt

dist
├── index.html          # 应用入口文件
├── js                  # 包含所有 JavaScript 文件
│   ├── app.js          # 主要应用逻辑
│   ├── chunk-vendors.js # 供应商库（如Vue等第三方库）
├── css                 # 包含所有 CSS 文件
│   ├── app.css         # 应用样式
└── ...
  • index.html: 这是应用的主入口。它引入了构建后的JavaScript和CSS，以便浏览器可以加载和运行应用。
  • js 目录: 这个目录下包含生成的JavaScript文件。app.js 文件通常包括应用的主要代码逻辑， chunk-vendors.js 则包含了所有第三方依赖库的代码。
  • css 目录: 如果你的项目中有CSS文件，经过构建后，它们会被压缩并存放于此。

1.3.2 资源的引用

在 index.html 中，所有的资源通常由Webpack配置自动处理，适当地引入和引用。你可以在构建后的 index.html 中看到类似以下内容：

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="css/app.css"><title>Vue App</title>
</head>
<body><div id="app"></div><script src="js/chunk-vendors.js"></script><script src="js/app.js"></script>
</body>
</html>

在浏览器加载这个HTML页面后，它将首先加载CSS文件，如果文件加载完成，JavaScript文件才会被执行，进而通过Vue的实例渲染 #app 这个根节点。

1.4 优化构建配置

Vue CLI提供了一些内置选项来优化你的构建过程。你可以在项目的根目录下找到vue.config.js文件（如果没有则可以自己创建）并进行一些配置以优化构建。例如，开启Gzip压缩，减少传输文件大小：

javascript

module.exports = {configureWebpack: {plugins: [// 可以添加Webpack插件进行额外的优化]},chainWebpack: (config) => {// 开启Gzip压缩const CompressionPlugin = require('compression-webpack-plugin');config.plugin('compression').use(CompressionPlugin, [{algorithm: 'gzip',test: /\.(js|css|html|svg)$/,threshold: 10240,minRatio: 0.8}]);}
};

1.5 构建后文件的使用

构建后的文件将被用于产品环境。你只需将 dist 文件夹中的文件部署到你的服务器或托管平台。这些文件经过压缩和优化，能够为终端用户提供更流畅的体验。

2. 部署Vue应用

当你完成Vue应用的构建后，接下来就是将它部署到服务器上，使其他人能够访问。这一步非常重要，因为部署不仅涉及到将文件上传到服务器，还需要考虑到如何配置、优化和维护应用。下面，我们将详细探讨如何部署Vue应用的多个步骤和可选平台。

2.1 选择部署平台

在选择部署平台时，根据你的需求和应用类型，市面上提供了多种选择。以下是一些常见的平台：

  • Vercel：专为前端框架和静态网站设计，支持自动化构建和持续集成，非常适合快速部署。
  • Netlify：同样适合静态网站，提供强大的构建、部署和服务器功能，操作简单，集成友好。
  • GitHub Pages：免费的托管服务，适合开源项目和小型网站，简单易用。
  • Firebase Hosting：Google提供的服务，适合需要云功能的现代应用，支持动态内容。
  • DigitalOcean、AWS、Heroku：适合需要更高灵活性和配置的用户，通常涉及更多的服务器管理工作。

2.2 在Vercel上部署

Vercel是一个非常直观的部署平台，以下是具体的步骤：

2.2.1 创建Vercel账号

如果你还没有Vercel账号，请访问 Vercel官网 注册一个账号。

2.2.2 安装Vercel CLI

在命令行中安装Vercel CLI，以便快速部署。运行以下命令：

npm install -g vercel

2.2.3 部署应用

  1. 进入项目目录：首先，确保你在Vue项目的根目录下。

  2. 运行Vercel命令：执行以下命令：

    vercel

  3. 登录 Vercel：如果是第一次使用，CLI会提示你登录。按照提示使用GitHub、GitLab或邮箱登录。

  4. 设置项目：接下来，Vercel会询问你一些设置（如项目名称、路径等）。你可以选择默认设置，Vercel会基于你的 dist 文件夹自动检测构建设置。

  5. 完成部署：部署过程中，Vercel会处理你的代码并生成URL。在命令行中会显示一个类似于 https://your-project-name.vercel.app/ 的链接，你可以直接访问你的应用。

2.2.4 自动化部署

Vercel支持从GitHub、GitLab和Bitbucket中自动化部署，你只需将仓库链接到Vercel即可。每当你推送代码时，Vercel会自动重新构建和部署应用。

2.3 在Netlify上部署

Netlify也是一个提供静态网站托管的平台，以下是部署步骤：

2.3.1 创建Netlify账号

访问 Netlify官网 注册一个账号。

2.3.2 上传构建的文件

  1. 新建站点：登录后，点击“New site from Git”或“Deploy manually”。

  2. 手动部署：如果选择手动部署，直接将 dist 文件夹中的所有内容拖放到上传区域，Netlify会自动处理部署。

2.3.3 配置项目参数

在Netlify中，您可以配置部署的选项，比如自定义域名、HTTPS支持等。Netlify会自动为您的站点配置HTTPS。

2.3.4 访问应用

一旦部署完成，你将获得一个Netlify提供的URL，可以通过该链接访问你的应用。

2.4 使用GitHub Pages部署

GitHub Pages是一个简单的选择，适合小型项目或个人博客。

2.4.1 准备仓库

确保你的项目代码已经推送到GitHub的一个仓库。

2.4.2 将构建文件推送到GitHub

  1. 在项目根目录下，使用以下命令将构建后的文件推送到gh-pages分支：

    bash

    git checkout -b gh-pages
git --work-tree dist git add --all
git commit -m "Deploying Vue app"
git push origin gh-pages --force

  2. 在仓库的设置中启用GitHub Pages，选择gh-pages作为源。

2.4.3 访问应用

你将获得 https://<your-github-username>.github.io/<your-repo-name>/ 的链接来访问应用。

2.5 在Firebase Hosting上部署

Firebase提供了强大的功能，非常适合希望使用云功能的开发者。

2.5.1 创建Firebase账号

访问 Firebase官网 创建一个账号并登录。

2.5.2 安装Firebase CLI

在命令行中输入以下命令来安装Firebase CLI：

npm install -g firebase-tools

2.5.3 初始化Firebase项目

  1. 在项目根目录下运行：

    firebase init

  2. 选择 “Hosting” 选项并按照提示配置。

  3. 输入要使用的 dist 文件夹作为公共目录。

2.5.4 部署应用

运行以下命令进行部署：

firebase deploy

一旦部署完成，你将获得一个Firebase提供的URL来访问你的应用。

2.6 配置与优化

在完成部署后，你可以进行进一步的配置与优化，包括：

  • HTTPS支持：大多数平台会自动为你的应用启用HTTPS，确保安全性。
  • 自定义域名：为你的应用配置自定义域名，提高品牌形象和可信度。
  • 持续集成：利用CI/CD工具（如GitHub Actions）进行自动化构建和测试，以确保应用的稳定性。

在本节中，我们探讨了如何将Vue应用部署到不同的平台。每个平台都有其独特的优势和配置步骤，选择合适的平台即可让你迅速将应用发布至互联网上。这个过程中不仅包括上传构建好的文件，还涉及到配置HTTPS、自定义域名等多个方面。在下一节中，我们将深入了解如何优化应用性能，使得用户获得更加流畅的体验。

3. 配置与优化

在成功部署你的Vue应用后，下一步就是考虑如何进一步优化应用的性能、可维护性和用户体验。这一部分我们将重点讨论一些可以实施的配置和优化策略，让你的Vue应用运行得更加顺畅。

3.1 性能优化

优化应用性能至关重要，它直接影响到用户的加载速度和整体体验。以下是一些可以实施的性能优化手段：

3.1.1 惰性加载（Lazy Loading）

对于大型Vue应用，惰性加载可以显著改善首屏加载时间。通过将路由或组件分割成更小的部分，你可以确保只有用户需要特定页面时，相关的JavaScript才会被加载。

javascript

const Foo = () => import(/* webpackChunkName: "foo" */ './Foo.vue');const routes = [{ path: '/foo', component: Foo },
];

这样，Foo组件就会在用户访问/foo时才加载，而不是在应用加载时加载所有内容。

3.1.2 精简依赖

定期审查并移除不再使用的库和依赖，可以减小最终构建的文件大小。确保只包含必要的依赖库和模块，这会帮助减轻加载负担。

3.1.3 资源压缩

使用Webpack的压缩插件，可以在构建过程中自动压缩JavaScript和CSS文件，减少文件体积，提高加载速度。

javascript

const CompressionPlugin = require('compression-webpack-plugin');module.exports = {configureWebpack: {plugins: [new CompressionPlugin({algorithm: 'gzip',test: /\.(js|css|html|svg)$/,threshold: 10240,minRatio: 0.8}),],},
};

3.1.4 缓存优化

利用HTTP缓存策略，可以减少用户在后续访问时需要下载的资源。确保服务器配置正确的缓存头，例如Cache-Control 和 ETag。

3.2 监控和分析

应用的优化不仅在于提升性能，同时也需要实时监控和用户行为分析。优秀的监控工具可以帮助你及时发现问题并做出优化。

3.2.1 使用Google Analytics

Google Analytics是一个强大的工具，可以让你获取每个页面的用户行为和访问数据。你可以通过集成Google Analytics来跟踪访问量、用户停留时间、转化率等重要指标。

在主文件中添加以下代码：

javascript

import Vue from 'vue';
import VueAnalytics from 'vue-analytics';Vue.use(VueAnalytics, {id: 'UA-XXXXXXXX-X', // 替换为你的Google Analytics IDrouter,
});

3.2.2 使用性能监控工具

工具如Sentry、New Relic或Lighthouse等，可帮助你监控应用的运行时性能，并实时捕获潜在的错误和性能瓶颈。

3.3 安全性配置

在开发和部署过程中，确保应用的安全性也非常重要。下面是一些常见的安全设置：

3.3.1 使用HTTPS协议

确保所有流量通过HTTPS进行加密，以保护用户数据。在如今的互联网环境中，任何一个现代应用都应该强制使用HTTPS。

3.3.2 防止XSS和CSRF攻击

确保在处理用户输入时做好防范，使用库如DOMPurify来过滤和清除潜在的恶意代码。CSRF（跨站请求伪造）也需要被妥善处理，可以通过CSRF令牌来防护。

3.3.3 配置CORS

对于涉及到跨域请求的应用，合理配置CORS（跨源资源共享）规则是必要的。确保只允许可信的域访问你的API，以增强安全性。

3.4 友好的用户体验

良好的用户体验对于应用的成功至关重要，以用户为中心的设计能使用户更容易使用你的应用。

3.4.1 使用加载指示器

在数据加载或路由切换时，使用加载指示器（如进度条或旋转图标）来提示用户。这样能够提升用户的耐心，减少等待时的焦虑感。

html

<template><div v-if="loading">加载中...</div><div v-else>内容</div>
</template>

3.4.2 错误处理

在应用中实现错误捕捉和处理机制。在遇到错误时，应提供友好的错误提示，并引导用户进行后续操作。

3.4.3 响应式设计

确保你的应用在不同设备和屏幕大小上都能良好展示。这可以通过媒体查询和使用UI框架（如Vuetify、Bootstrap Vue等）来实现。

在这一节中，我们探讨了如何对Vue应用进行配置与优化。通过实施性能优化、监控用户行为、强化安全性及提升用户体验，你的应用将能够在各种使用场景中表现得更卓越。优化是一个持续的过程，定期检查和改进将使应用保持良好的运行状态。接下来，让我们看看如何进行项目的后续维护和更新，以确保应用始终保持最佳状态。

4. 总结

今天我们cover了Vue应用的构建和部署知识。在完成构建后，通过选择适合的平台，可以轻松将我们的应用发布到网上。接下来的日子里，你可以进一步探索如何优化你的应用性能，以及如何集成更多的功能。

明天，我们将学习Vue中的性能优化技巧，帮助你打造更加流畅的用户体验。敬请期待！


http://www.ppmy.cn/embedded/162092.html

相关文章

日语学习-日语知识点小记-构建基础-JLPT-N4N5阶段（5）：動詞ます形 ＞ 動詞ない形

日语学习-日语知识点小记-构建基础-JLPT-N4N5阶段（5）：動詞ます形 ＞ 動詞ない形

日语学习-日语知识点小记-构建基础-JLPT-N4&N5阶段（5）：動詞ます形　＞　動詞ない形 1、前言（1）情况说明（2）工程师的信仰2、知识点（１）動詞ます形　＞　動詞ない形（２）～ないでください：（３）指带词（指示代词）：こ　そ　あ　ど3、单词（1）日语单词（2）日语…
阅读更多...
深入解析A2DP v1.4协议：蓝牙高质量音频传输的技术与实现

深入解析A2DP v1.4协议：蓝牙高质量音频传输的技术与实现

1. A2DP概述 A2DP&#xff08;Advanced Audio Distribution Profile&#xff09;是一种高质量音频流媒体协议&#xff0c;旨在实现高质量音频内容的分发&#xff0c;通常用于通过蓝牙设备传输音频数据&#xff0c;例如将音乐从便携式播放器传输到耳机或扬声器。与传统的蓝牙语…
阅读更多...
elementUI tree树形控件 根据数据动态设置禁用，全选时不可选中禁用数据

elementUI tree树形控件 根据数据动态设置禁用，全选时不可选中禁用数据

需求 根据后端返回的数据禁用数据&#xff0c;将tree结构对应的数据设置为禁用状态&#xff0c;并且在点击全选后不可选中禁用数据。 效果 根据数据动态设置禁用 全选时不可选中禁用数据 代码 <template>...<div class"list-box"><div class&q…
阅读更多...
ROACH

ROACH

End-to-End Urban Driving by Imitating a Reinforcement Learning Coach CARLA-Roach ICCV‘21论文&#xff1a;模仿一个强化学习教练的端到端城市驾驶 文章目录 Roach输入BEV语义分割图像测量向量 Roach输出训练策略网络价值网络 具体实现由 Roach 监督的模仿学习&#xff08…
阅读更多...
Python爬取哪吒2电影（2025最新详细版）

Python爬取哪吒2电影（2025最新详细版）

前言 这是一个适用于小白的Python爬虫免费教学课程&#xff0c;只有7节&#xff0c;让零基础的你初步了解爬虫&#xff0c;跟着课程内容能自己爬取资源。看着文章&#xff0c;打开电脑动手实践&#xff0c;平均45分钟就能学完一节&#xff0c;如果你愿意&#xff0c;今天内你就…
阅读更多...
【deepseek-r1本地部署】

【deepseek-r1本地部署】

首先需要安装ollama,之前已经安装过了&#xff0c;这里不展示细节 在cmd中输入官网安装命令&#xff1a;ollama run deepseek-r1:32b&#xff0c;开始下载 出现success后&#xff0c;下载完成 接下来就可以使用了&#xff0c;不过是用cmd来运行使用 可以安装UI可视化界面&a…
阅读更多...
【几何投影】Maxscript实现一个对象投影到另一个对象表面的方法

【几何投影】Maxscript实现一个对象投影到另一个对象表面的方法

先说一下我们要实现的功能：有一个平面对象（例如一个五边形的网格对象），然后，将其沿着垂直其表面的方向，投影到另一个三维对象表面，使其形状与接受投影的三维对象表面形状拟合，并具有接受投影对象该部分（位置）的几何拓扑结构。如图： 这看起来是一个不错的想法，但实现…
阅读更多...
ArrayList、LinkedList、HashMap、HashTable、HashSet、TreeSet

ArrayList、LinkedList、HashMap、HashTable、HashSet、TreeSet

集合族谱 在这些集合中&#xff0c;仅有vector和hashtable是线程安全的&#xff0c;其内部方法基本都有synchronized修饰。 ArrayList 底层采用Object数组实现&#xff0c;实现了RandomAccess接口因此支持随机访问。插入删除操作效率慢。 ArrayList需要一份连续的内存空间。 A…
阅读更多...
最新文章

Copyright @ 2022~2023