前端部署指南：手把手教你部署 Vue 项目

🌈个人主页：前端青山 🔥系列专栏：Vue篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来Vue篇专栏内容:Vue-部署项目

前言

嗨喽伙伴们大家好，我是依旧青山。作为一名前端开发工程师，我深知很多刚入门的小白和已经有一定经验的前端开发者在部署项目时可能会遇到各种问题。虽然我们还没有开始学习后端相关的知识，但大家都希望能将自己的 Vue 项目部署到服务器上，展示给更多人看。今天，我将为大家详细介绍如何从零开始部署一个 Vue 项目，让每个人都能轻松上手。

本文将涵盖以下几个方面：

1. 准备工作
2. 服务器重装系统
3. 连接服务器
4. 安装|配置 Nginx
5. 服务器安装node环境
6. 打包|部署vue项目
7. 常见问题及解决方法

目录

前言

1.准备工作

2.服务器重装系统

3.连接服务器

4.安装nginx

4.1 安装nginx

4.3 给服务器的安全组添加需要使用的端口号

4.4查看nginx默认的web文件位置

5.服务器安装node环境

在 CentOS 上安装 nvm 和 Node.js

6. 打包|部署vue项目

7.常见问题及解决方法

7.1更改nginx端口

1. 修改 Nginx 配置文件

编辑 nginx.conf

2. 重启 Nginx 服务

3. 检查 Nginx 状态

4. 检查防火墙设置

检查 iptables 规则

5. 云服务商的安全组设置

登录天翼云控制台

6. 从外部网络测试

7. 使用在线工具测试

7.2 rpm -q nginx 未安装软件包 nginx

解决方案

更换镜像源

使用 Nginx 官方仓库安装 Nginx

7.3 配置 HTTPS(可选)

安装 Certbot

获取并安装 SSL 证书

7.4 Nginx 无法启动

1. Nginx 无法启动

2. 网络不通

3. 防火墙阻止

1.准备工作

申请服务器：云主机-云服务器-弹性云主机-ECS - 天翼云

下载资源：finalshell  FinalShell SSH工具,服务器管理,远程桌面加速软件,支持Windows,macOS,Linux,版本4.5.11,更新日期2024.10.28 - FinalShell官网

2.服务器重装系统

登录天翼云后台，找到弹性云主机，点击管理，关机，选择右上角 -更多 - 一键重装

更换操作系统

镜像： centos 7.9 64位

安全设置： 自定义密码

获取到 服务器公网的IP地址： 255.255.255.0(公网IP)

3.连接服务器

打开finalshell，点击 添加服务器，选择 ssh 连接

名称： 随意就好

主机： 服务器的公网IP地址

用户名： root

密码： 自定义密码

选择 你添加服务器，双击即可，接受并且保存密码, 出现光标即为正常连接了服务器

4.安装nginx

什么是Nginx ？

Nginx 是俄罗斯人 Igor Sysoev 编写的轻量级Web服务器，它的发音为 [ˈendʒɪnks] ，它不仅是一个

高性能的 HTTP 和反向代理服务器，同时也是一个 IMAP/POP3/SMTP 代理服务器。

事实上nginx的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。

Nginx 以事件驱动的方式编写，所以有非常好的性能，同时也是一个非常高效的反向代理、负载均衡服

务器。在性能上， Nginx 占用很少的系统资源，能支持更多的并发连接，达到更高的访问效率；在功能

上， Nginx 是优秀的代理服务器和负载均衡服务器；在安装配置上， Nginx 安装简单、配置灵活。

Nginx 支持热部署，启动速度特别快，还可以在不间断服务的情况下对软件版本或配置进行升级，即使

运行数月也无需重新启动。

Nginx 可以作为一个 HTTP 服务器进行网站的发布处理，另外 Nginx 可以作为反向代理进行负载均衡的实现。

Nginx 能做什么？

正向代理

反向代理

负载均衡

HTTP服务器(包含动静分离)

4.1 安装nginx

1. 更新系统包：

登录后复制 代码解读

sudo yum update -y

• 1.

1. 安装 EPEL 仓库(Nginx 不在默认的 Red Hat 仓库中，需要添加 EPEL 仓库)：

登录后复制 代码解读

sudo yum install epel-release -y

• 1.

1. 安装 Nginx：

登录后复制 代码解读

sudo yum install nginx -y

• 1.

1. 启动 Nginx 服务：

登录后复制 代码解读

sudo systemctl start nginx

• 1.

1. 设置 Nginx 开机自启：

登录后复制 代码解读

sudo systemctl enable nginx

• 1.

6.检查 Nginx 状态

登录后复制 代码解读

sudo systemctl status nginx

• 1.

你可以通过以下命令来确认 Nginx 是否已经设置为开机自启动：

这个命令会返回以下几种可能的结果：

• enabled：表示 Nginx 已经设置为开机自启动。
• disabled：表示 Nginx 没有设置为开机自启动。
• static：表示该服务不能被直接启动，但可以作为依赖项由其他服务启动。

如果你发现 Nginx 没有设置为开机自启动，可以使用以下命令来设置：

登录后复制 代码解读<