跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScriptNode.js大前端

Vue 项目服务器部署指南:Nginx 与 Node 环境配置

综述由AI生成详细阐述了在 Linux 服务器上部署 Vue 项目的完整流程。内容包括准备云服务器、安装 Nginx 反向代理服务器、配置 Node.js 环境、构建并上传 Vue 静态资源。此外,文章还涉及了安全组端口开放、防火墙配置、HTTPS 证书获取以及常见部署问题的排查方案,旨在帮助开发者实现前端应用的高效上线。

深海蔚蓝发布于 2026/4/6更新于 2026/5/2229 浏览
Vue 项目服务器部署指南:Nginx 与 Node 环境配置

Vue 项目服务器部署指南

1. 准备工作

  • 申请服务器:选择任意云服务商的云服务器(ECS)。
  • 下载工具:准备 SSH 客户端工具(如 FinalShell、Xshell 等)。

2. 服务器重装系统

登录云服务商后台,找到弹性云主机,执行以下操作:

  1. 关机。
  2. 选择一键重装系统。
  3. 镜像选择:CentOS 7.9 64 位。
  4. 设置自定义密码。

获取服务器的公网 IP 地址。

3. 连接服务器

打开 SSH 客户端,点击添加服务器,选择 SSH 连接:

  • 名称:随意填写。
  • 主机:服务器的公网 IP 地址。
  • 用户名:root。
  • 密码:自定义密码。

双击连接,接受并保存密码,出现光标即为连接成功。

4. 安装 Nginx

4.1 安装步骤

  1. 更新系统包:
    sudo yum update -y
    
  2. 安装 EPEL 仓库(Nginx 不在默认 Red Hat 仓库中):
    sudo yum install epel-release -y
    
  3. 安装 Nginx:
    sudo yum install nginx -y
    
  4. 启动 Nginx 服务:
    sudo systemctl start nginx
    
  5. 设置开机自启:
    sudo systemctl enable nginx
    
  6. 检查 Nginx 状态:
    sudo systemctl status nginx
    

4.2 防火墙与安全组

如果防火墙启用,需允许 HTTP 和 HTTPS 流量:

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

在云服务商控制台的安全组设置中,添加入站规则,开放所需端口(如 80, 443 或自定义端口)。注意:在中国大陆,80/443 端口通常需要进行 ICP 备案后方可使用,建议修改为其他端口(如 90)。

4.3 查看默认文件位置

ls -la /usr/share/nginx/html
cat /usr/share/nginx/html/index.html

后续可将资源文件上传至此目录。

5. 服务器安装 Node 环境

使用 nvm 管理多版本 Node.js。

5.1 安装依赖

sudo yum install -y curl

5.2 安装 NVM

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

5.3 加载 NVM

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

将上述命令添加到 ~/.bashrc 或 ~/.zshrc 文件中以永久生效,然后重新加载:

source ~/.bashrc

5.4 安装 Node.js

nvm install --lts
# 或安装特定版本
nvm install 18.12.1

验证安装:

npm -v
node -v

6. 打包与部署 Vue 项目

6.1 修改配置

默认打包路径为绝对路径,建议修改为相对路径。打开 vue.config.js,修改 publicPath 为 './'。

确保路由模式为 Hash 模式。

6.2 构建项目

npm run build

6.3 上传资源

将生成的 dist 文件夹内容上传至 /usr/share/nginx/html 目录下。

6.4 重载配置

sudo systemctl reload nginx

浏览器访问 http://你的主机公网 IP:端口 进行测试。

7. 常见问题及解决方法

7.1 更改 Nginx 端口

若外网无法访问,可能是端口未开放或被占用。修改监听端口从 80 改为 90:

  1. 编辑配置文件:

    sudo vi /etc/nginx/nginx.conf
    

    将 listen 80; 改为 listen 90;。

  2. 重启服务:

    sudo systemctl restart nginx
    
  3. 检查状态:

    sudo systemctl status nginx
    
  4. 防火墙设置: 确保允许外部访问端口 90。

    sudo iptables -A INPUT -p tcp --dport 90 -j ACCEPT
    sudo service iptables save
    
  5. 安全组设置: 在云服务商控制台添加入站规则,协议 TCP,端口范围 90,源地址 0.0.0.0/0。

  6. 测试:

    curl 公网 IP:90
    

7.2 rpm -q nginx 未安装软件包

若安装失败,可能是 CentOS 官方仓库停止更新导致依赖缺失。

解决方案:

  1. 更换镜像源:使用阿里云等稳定镜像源。
    sudo wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo
    sudo yum clean all
    sudo yum makecache
    
  2. 使用 Nginx 官方仓库: 创建 /etc/yum.repos.d/nginx.repo,添加以下内容:
    [nginx]
    name=nginx repo
    baseurl=http://nginx.org/packages/centos/7/$basearch/
    gpgcheck=0
    enabled=1
    

7.3 配置 HTTPS(可选)

使用 Let's Encrypt 免费获取 SSL 证书。

  1. 安装 Certbot:
    sudo yum install epel-release -y
    sudo yum install certbot python2-certbot-nginx -y
    
  2. 获取证书:
    sudo certbot --nginx -d 你的公网 IP
    

7.4 Nginx 无法启动

  1. 检查日志:
    sudo tail -f /var/log/nginx/error.log
    
  2. 检查端口冲突:
    sudo lsof -i :80
    sudo lsof -i :90
    
  3. 检查配置文件语法:
    sudo nginx -t
    
  4. 网络不通:检查路由表 ip route 及 DNS 配置 /etc/resolv.conf。
  5. 防火墙阻止:
    sudo ufw reload
    sudo ufw allow 90/tcp
    sudo ufw status
    

目录

  1. Vue 项目服务器部署指南
  2. 1. 准备工作
  3. 2. 服务器重装系统
  4. 3. 连接服务器
  5. 4. 安装 Nginx
  6. 4.1 安装步骤
  7. 4.2 防火墙与安全组
  8. 4.3 查看默认文件位置
  9. 5. 服务器安装 Node 环境
  10. 5.1 安装依赖
  11. 5.2 安装 NVM
  12. 5.3 加载 NVM
  13. 5.4 安装 Node.js
  14. 或安装特定版本
  15. 6. 打包与部署 Vue 项目
  16. 6.1 修改配置
  17. 6.2 构建项目
  18. 6.3 上传资源
  19. 6.4 重载配置
  20. 7. 常见问题及解决方法
  21. 7.1 更改 Nginx 端口
  22. 7.2 rpm -q nginx 未安装软件包
  23. 7.3 配置 HTTPS(可选)
  24. 7.4 Nginx 无法启动
  • 💰 8折买阿里云服务器限时8折了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • PicoClaw 轻量级 AI 助手安装与使用指南
  • AI 绘画实战指南:从提示词到高质量图像生成
  • 机器人通讯总线选型:CAN/FD、高速 485 与 EtherCAT 深度对比
  • C++ 火柴人跑酷游戏开发流程详解
  • PGvector 在 Spring AI 中实现向量数据库存储与相似性搜索
  • AI 技术在游戏开发与内容创作中的应用实践
  • Neo4j Desktop 2 安装与使用指南
  • SkyWalking 多语言探针现状:.NET、C++ 与 Lua 实践指南
  • 现代 C++ 构建高性能 HTTP 服务器设计与实现
  • 前端地图开发基础:服务类型、坐标系与 SDK 选型指南
  • 前端面试核心知识点全解析
  • Python 与前端集成:构建全栈应用
  • 使用 Strapi 快速搭建无头 CMS 后台并生成 API
  • OpenClaw 的 20 个精选 Skills 使用指南与实战技巧
  • Python OCC 三维建模实战:从环境搭建到工业数据交换
  • WeBASE 一键部署实战:Ubuntu 环境配置与常见问题解决
  • Python 爬虫岗位市场现状与职业发展指南
  • Agent Skills:构建可扩展 AI 代理能力的模块化架构
  • WebRTC 播放器横向测评:H5 直播低延迟方案对比
  • Python __slots__:减少内存占用的高级技巧

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online