前端部署指南：手把手教你部署 Vue 项目！今天我要给大家分享一些自己日常学习到的一些知识点，并以文字的形式跟大家一起交

哈喽，各位小伙伴们，你们好呀，我是喵手。

今天我要给大家分享一些自己日常学习到的一些知识点，并以文字的形式跟大家一起交流，互相学习，一个人虽可以走的更快，但一群人可以走的更远。

我是一名后端开发爱好者，工作日常接触到最多的就是Java语言啦，所以我都尽量抽业余时间把自己所学到所会的，通过文章的形式进行输出，希望以这种方式帮助到更多的初学者或者想入门的小伙伴们，同时也能对自己的技术进行沉淀，加以复盘，查缺补漏。

小伙伴们在批阅的过程中，如果觉得文章不错，欢迎点赞、收藏、关注哦。三连即是对作者我写作道路上最好的鼓励与支持！

前言

如果你是一名前端开发者，或者是刚入门的小白，那么你一定知道 Vue 是前端开发中的“香饽饽”。写完 Vue 项目之后，如何高效地将它部署到线上，这是一个至关重要的环节。别急，今天咱们就来聊聊 Vue 项目的部署！🎯

本文不会用枯燥的技术语言把你绕晕，而是用轻松有趣的方式，带你一步步完成 Vue 项目的部署。无论你是要把项目挂在服务器上，还是用静态托管服务，通通给你安排得明明白白！

🎨 了解部署的基本概念
🛠️ 部署 Vue 项目的几种方式
- 本地预览：先看看效果
- 静态服务器部署
- 云服务部署：阿里云/腾讯云等
- 使用 CI/CD 工具自动化部署
🖼️ 部署案例实战：从源码到上线
- 本地运行的准备
- 使用 Nginx 部署 Vue 项目
- 将项目托管到 Vercel
🎁 延伸知识：让部署更丝滑的小技巧
🎉 总结

了解部署的基本概念

在开始部署之前，我们先搞清楚：什么是部署？
简单来说，部署就是将你开发好的 Vue 项目，放到一个能被用户访问的地方。换句话说，你写的代码需要从“开发环境”搬到“生产环境”。

开发环境👉你自己用 VSCode 敲代码、npm 启动项目的地方；
生产环境👉用户打开浏览器输入网址，看到页面的地方。

是不是清楚多了？🤔 部署不仅仅是一个技术步骤，更是一门“艺术”。

部署 Vue 项目的几种方式

1. 本地预览：先看看效果

在打包之前，最好先预览一下打包后的效果。使用以下命令：

npm run build
serve -s dist

安装 serve 工具后，运行上述命令就能看到打包后的页面啦！🎉

2. 静态服务器部署

最简单直接的方式就是用一个静态服务器，比如使用 Nginx 或 Apache。

打包项目：

   npm run build

这会在项目目录下生成一个 dist 文件夹，里面是你的生产环境代码。

上传到服务器：将 dist 文件夹里的内容上传到服务器的静态资源目录。
配置 Nginx：

在 Nginx 的配置文件中，添加如下内容：

   server {
       listen       80;
       server_name  yourdomain.com;
       location / {
           root   /path/to/dist;
           index  index.html;
       }
   }

保存配置并重启 Nginx！🎯

3. 云服务部署：阿里云/腾讯云等

现在云服务简直不要太方便。以阿里云为例：

购买 ECS（云服务器），安装 CentOS 系统。
配置服务器环境，比如安装 Node.js、Nginx 等。
上传项目文件，按照上文的 Nginx 配置方法，启动服务。

如上简单的几个步骤，就可以把一台服务器的基础配置搞定，这个大家自由选择。

4. 使用 CI/CD 工具自动化部署

如果你有点“懒”（当然我不是说你😏），可以试试 GitHub Actions 或 Jenkins 这样的 CI/CD 工具，实现一键部署：

提交代码到 GitHub 仓库；
配置 .yml 文件，定义自动化部署流程；
每次推送代码时，自动部署！

当然，这个还是需要掌握点基础知识点的，可以先去学习一些相关的自动化部署脚本命令。

部署案例实战：从源码到上线

案例 1：使用 Nginx 部署 Vue 项目

本地构建：

   npm run build

打包后的文件会在 dist 文件夹中。
2. 上传文件：用 FTP 工具将 dist 目录里的内容上传到服务器 /usr/share/nginx/html 目录。这里你也可以直接通过sz等命令进行上传，这个随意。

配置 Nginx：编辑 /etc/nginx/nginx.conf，新增如下配置：

   server {
       listen       80;
       server_name  my-vue-app.com;
       location / {
           root   /usr/share/nginx/html;
           index  index.html;
       }
   }

命令解读：

这段 Nginx 配置文件定义了一个用于托管 Vue.js 应用的服务器配置。以下是详细解读：

server 块
代表一个服务器的配置，用于处理与指定域名和端口相关的请求。
监听端口
```
listen 80;
```
- 指定 Nginx 在 80 端口上监听 HTTP 请求。
- 80 是 HTTP 默认端口，因此用户访问 http://my-vue-app.com 时，Nginx 会处理请求。
服务器域名
```
server_name my-vue-app.com;
```
- 配置服务器的域名。
- 只有请求的 Host 标头中包含 my-vue-app.com 的 HTTP 请求会被该配置块处理。
根路由的处理
```
location / {
    root /usr/share/nginx/html;
    index index.html;
}
```
- location /：匹配请求路径的根路径 /（及其子路径）。
- root：指定静态资源文件的根目录为 /usr/share/nginx/html。
  - 假如用户请求 http://my-vue-app.com/, Nginx 会查找 /usr/share/nginx/html/index.html 文件并返回。
  - 如果请求的是 http://my-vue-app.com/some/path，Nginx 会尝试查找 /usr/share/nginx/html/some/path。
- index：当用户访问目录时，默认返回 index.html 文件。
适用于单页应用 (SPA) 的配置注意
Vue.js 是典型的单页应用（SPA），一般依赖前端路由（如 my-vue-app.com/about），而这些路径并不存在于文件系统中。因此，需要特别处理不存在的路径，将所有未匹配的路径重定向到 index.html，如下所示：
```
location / {
    root /usr/share/nginx/html;
    index index.html;
    try_files $uri /index.html;
}
```
- try_files $uri /index.html;：表示如果请求路径（$uri）对应的文件或目录不存在，则返回 index.html，从而由前端路由处理。

如上我这段配置适用于基本的 Vue.js 部署，但需扩展以支持更复杂的场景，如 HTTPS 配置或前端路由支持。

重启 Nginx：
```
sudo systemctl restart nginx
```
访问 http://my-vue-app.com，项目上线！🎉

案例 2：将 Vue 项目托管到 Vercel

登录 Vercel 官网并注册。
将 Vue 项目推送到 GitHub 仓库。
在 Vercel 上选择 “New Project”，绑定你的 GitHub 仓库。
自动化部署完成后，Vercel 会生成一个访问链接。简单又高效！🎯

延伸知识：让部署更丝滑的小技巧

使用环境变量：通过 .env 文件动态管理 API 地址。
开启 Gzip 压缩：在 Nginx 中开启 Gzip，减小资源加载时间。
配置 HTTPS：给你的站点加个 SSL 证书，提升用户信任感！
用 Docker 容器化部署：方便项目的快速迁移与重构。

总结

哇，这一路讲下来，你是不是对 Vue 部署有了更多的了解呢？🙌 部署看似是一件小事，但它是项目成功的最后一步，也是用户体验的起点。希望今天的指南能帮你在部署路上少走弯路，多些顺畅！

写代码是快乐的，部署也是艺术。愿你的项目在全世界每一个角落都熠熠生辉！🌍 如果有任何问题或建议，记得来找我聊聊哦！👋

... ...

文末

好啦，以上就是我这期的全部内容，如果有任何疑问，欢迎下方留言哦，咱们下期见。

... ...

学习不分先后，知识不分多少；事无巨细，当以虚心求教；三人行，必有我师焉！！！

wished for you successed ！！！

⭐️若喜欢我，就请关注我叭。

⭐️若对您有用，就请点赞叭。

⭐️若有疑问，就请评论留言告诉我叭。