前端部署指南：手把手教你部署 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

2. 安装 EPEL 仓库（Nginx 不在默认的 Red Hat 仓库中，需要添加 EPEL 仓库）：

   sudo yum install epel-release -y

3. 安装 Nginx：

   sudo yum install nginx -y

4. 启动 Nginx 服务：

   sudo systemctl start nginx

5. 设置 Nginx 开机自启：

sudo systemctl enable nginx

6.检查 Nginx 状态

sudo systemctl status nginx

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

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

• enabled：表示 Nginx 已经设置为开机自启动。

• disabled：表示 Nginx 没有设置为开机自启动。

• static：表示该服务不能被直接启动，但可以作为依赖项由其他服务启动。

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

sudo systemctl enable nginx

设置完成后，再次运行 sudo systemctl is-enabled nginx 来确认是否已经成功设置为开 机自启动。

1. 配置防火墙

如果防火墙是启用的，需要允许 HTTP 和 HTTPS 流量。

sudo firewall-cmd --permanent --add-service=http
sudo firewall-cmd --permanent --add-service=https
sudo firewall-cmd --reload

浏览器中输入公网ip地址，出现如下界面代表nginx已经安装成功

如果出现如下页面，也不要着急

ICP备案后放行的端口

80/8080/443/8443端口必须完成ICP备案（域名/网站备案）后才可开通使用。根据《非经营性互联网信息服务备案管理办法》(信息产业部令第33号)，在中国境内无备案记录的域名不可上线。

所以我们需要更改nginx端口,我这边修改的为90

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

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

ls -la /usr/share/nginx/html

cat /usr/share/nginx/html/index.html

以后就可以把资源文件上传到此处

5.服务器安装node环境

使用nvm安装多版本的node

NVM（Node Version Manager）是Node.js的版本管理软件，使您可以轻松在Node.js各个版本间进行切换。适用于长期做 node 开发的人员或有快速更新node版本、快速切换node版本的场景。

使用git将源码克隆到本地的~/.nvm目录下，并检查最新版本。

在 CentOS 上安装 nvm 和 Node.js

1. 更新系统包：

   sudo yum update -y

2. 安装依赖包：

   sudo yum install -y curl

3. 安装 nvm： 使用 curl 下载并安装 nvm：

   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

4. 加载 nvm： 安装脚本会提示你重新加载 shell 配置文件。你可以通过以下命令来加载 nvm：

   bashexport NVM_DIR="$HOME/.nvm"
   [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
   [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

   为了使这些更改永久生效，你可以将上述命令添加到你的 ~/.bashrc 或 ~/.zshrc 文件中：

   bashecho 'export NVM_DIR="$HOME/.nvm"' >> ~/.bashrc
   echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> ~/.bashrc
   echo '[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"' >> ~/.bashrc

   然后重新加载你的 shell 配置文件：

   source ~/.bashrc

5. 安装 Node.js： 使用 nvm 安装特定版本的 Node.js。例如，安装最新的 LTS 版本：

   nvm install --lts

   你也可以安装特定版本，例如 v18.12.1

   nvm install 18.12.1

6. 验证安装： 检查 Node.js 和 npm 是否安装成功：

   npm -v

6. 打包|部署vue项目

默认情况下，直接运行以下命令即可完成打包

npm run build

需要注意到，默认打包出来的项目，css以及js引入的方式都是绝对路径，建议修改为相对路径的引入方式

打开vue.config.js文件，修改 publicPath 为 './'即可

一定要查看路由的模式是不是为 hash 模式

修改vue项目中的数据请求的地址

 npm run build

将目录 dist 文件夹拖动到/usr/share/nginx/html目录下

• 重新加载Nginx配置：

  sudo systemctl reload nginx

浏览器测试 http://你的主机公网IP/

7.常见问题及解决方法

7.1更改nginx端口

如果服务器内部curl 公网IP 可以访问到nginx页面但是外网不可以,可能是端口占用或为开放

如果你决定将 Nginx 监听的端口从 80 改为 90，可以按照以下步骤进行操作：

1. 修改 Nginx 配置文件

编辑 Nginx 的配置文件，将监听端口从 80 改为 90。

编辑 nginx.conf

sudo vi /etc/nginx/nginx.conf

将 listen 80; 改为 listen 90;。

user  nginx;
worker_processes  auto;
error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;
    sendfile        on;
    server {
    listen 90;
    server_name 公网IP;
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
    }
}
    #tcp_nopush     on;
    keepalive_timeout  65;
    #gzip  on;
#    include /etc/nginx/conf.d/*.conf;
}

2. 重启 Nginx 服务

确保 Nginx 服务重新加载了最新的配置文件。

sudo systemctl restart nginx

3. 检查 Nginx 状态

确保 Nginx 服务正在运行。

sudo systemctl status nginx

4. 检查防火墙设置

确保防火墙允许外部访问端口 90。

检查 iptables 规则

sudo iptables -L -n | grep 90

确保有以下规则：

plaintext

ACCEPT     tcp  --  0.0.0.0/0            0.0.0.0/0            tcp dpt:90 ctstate NEW,UNTRACKED

如果没有这条规则，可以添加它：

sudo iptables -A INPUT -p tcp --dport 90 -j ACCEPT

保存 iptables 规则：

sudo service iptables save

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

确保天翼云的安全组设置允许外部访问端口 90。

登录天翼云控制台

1. 打开浏览器，登录到天翼云控制台。

2. 导航到“安全组”设置。

3. 选择你服务器所属的安全组。

4. 添加入站规则：

   • 协议类型：TCP

   • 端口范围：90

   • 源地址：0.0.0.0/0

6. 从外部网络测试

使用 curl 命令测试端口 90 是否开放。

curl 公网IP:90

7. 使用在线工具测试

使用在线端口检测工具，例如：

• YouGetSignal

在这些网站上输入你的 IP 地址 公网IP 和端口 90，它们会告诉你端口是否开放。

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

虽然 Nginx 及其依赖项的安装过程开始了一部分，但由于某些依赖项的下载失败，导致整个安装过程没有完成。这通常是因为 CentOS 7 的官方仓库已经停止更新，导致一些包无法下载。

解决方案

1. 更换镜像源： 你可以更换为其他更稳定的镜像源，例如阿里云的镜像源。

2. 安装 Nginx 仓库： 使用 Nginx 官方提供的仓库来安装 Nginx。

更换镜像源

1. 备份当前的 YUM 配置文件：

   sudo cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup

2. 下载并替换为阿里云的 YUM 配置文件：

   sudo wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo

3. 清理缓存并更新 YUM 缓存：

   sudo yum clean all
   sudo yum makecache

使用 Nginx 官方仓库安装 Nginx

1. 添加 Nginx 官方仓库：

   sudo vi /etc/yum.repos.d/nginx.repo

   在文件中添加以下内容：

   [nginx]
   name=nginx repo
   baseurl=http://nginx.org/packages/centos/7/$basearch/
   gpgcheck=0
   enabled=1

2. 安装 Nginx：

   sudo yum install nginx -y

3. 启动 Nginx 服务：

   sudo systemctl start nginx

4. 设置 Nginx 开机自启动：

   sudo systemctl enable nginx

5. 检查 Nginx 状态：

   sudo systemctl status nginx

6. 验证 Nginx 安装： 打开浏览器，访问你的服务器 IP 地址，例如 http://你的公网IP，应该会看到 Nginx 的默认欢迎页面。

7.3 配置 HTTPS（可选）

如果你希望使用 HTTPS，可以配置 Nginx 使用 SSL/TLS。你可以使用 Let's Encrypt 免费获取 SSL 证书。

安装 Certbot

bashsudo yum install epel-release -y
sudo yum install certbot python2-certbot-nginx -y

获取并安装 SSL 证书

sudo certbot --nginx -d 你的公网IP

按照提示操作，Certbot 会自动修改 Nginx 配置文件并重启 Nginx。

7.4 Nginx 无法启动

1. Nginx 无法启动

• 检查日志：

sudo tail -f /var/log/nginx/error.log

• 检查配置文件语法：

  sudo nginx -t

• 检查端口冲突：

  sudo lsof -i :80
  sudo lsof -i :90

2. 网络不通

• 检查网络配置：

  ip a

• 检查 DNS 配置：

  cat /etc/resolv.conf

• 检查路由表：

  ip route

3. 防火墙阻止

• 检查防火墙状态：

  sudo ufw status

• 允许 80 端口：

  sudo ufw allow 80/tcp

• 允许 90 端口：

  sudo ufw allow 90/tcp

• 重新加载防火墙规则：

  sudo ufw reload

  通过本文，我们详细介绍了如何从零开始部署一个 Vue 项目。无论你是前端小白还是有一定经验的开发者，希望这些步骤和命令能帮助你顺利地将你的 Vue 项目部署到服务器上。