前端部署指南:从零开始部署 Vue 项目
详细讲解了在 Linux 服务器上部署 Vue 项目的完整流程。内容包括准备云服务器环境,使用 SSH 连接服务器,安装配置 Nginx 作为 Web 服务器,通过 nvm 管理 Node.js 版本,以及 Vue 项目的打包与静态资源部署。此外,文章还提供了修改 Nginx 端口、配置云服务商安全组、启用 HTTPS 证书以及解决常见启动错误和防火墙问题的实操方案,帮助开发者实现前端项目的高效上线。

详细讲解了在 Linux 服务器上部署 Vue 项目的完整流程。内容包括准备云服务器环境,使用 SSH 连接服务器,安装配置 Nginx 作为 Web 服务器,通过 nvm 管理 Node.js 版本,以及 Vue 项目的打包与静态资源部署。此外,文章还提供了修改 Nginx 端口、配置云服务商安全组、启用 HTTPS 证书以及解决常见启动错误和防火墙问题的实操方案,帮助开发者实现前端项目的高效上线。

申请云服务器。下载并安装 SSH 客户端工具(如 FinalShell)。
登录云服务商后台,找到弹性云主机,关机后选择一键重装系统。
获取服务器的公网 IP 地址。
打开 SSH 客户端,点击添加服务器,选择 SSH 连接。
双击连接,接受并保存密码,出现光标即为正常连接。
Nginx 是高性能的 HTTP 和反向代理服务器,支持负载均衡、动静分离等功能。
sudo yum install epel-release -y
sudo yum update -y
sudo yum install nginx -y
启动 Nginx 服务:
sudo systemctl start nginx
设置开机自启:
sudo systemctl enable nginx
检查 Nginx 状态:
sudo systemctl status nginx
如果防火墙启用,需允许 HTTP 和 HTTPS 流量:
sudo firewall-cmd --permanent --add-service=http
sudo firewall-cmd --permanent --add-service=https
sudo firewall-cmd --reload
浏览器输入公网 IP 地址,若显示 Nginx 默认欢迎页则安装成功。
在云服务商控制台的安全组设置中,添加入站规则,开放所需端口(如 80, 443 或自定义端口)。
ls -la /usr/share/nginx/html
cat /usr/share/nginx/html/index.html
后续可将资源文件上传至此目录。
使用 nvm 安装多版本的 Node.js。
安装依赖包:
sudo yum install -y curl
安装 nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
加载 nvm:
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
将上述命令添加到 ~/.bashrc 使更改永久生效,然后重新加载配置:
source ~/.bashrc
验证安装:
npm -v
安装 Node.js:
nvm install --lts
# 或安装特定版本
nvm install 18.12.1
默认打包命令:
npm run build
注意事项:
vue.config.js 中的 publicPath 为 './',使用相对路径引入。将生成的 dist 文件夹内容上传至 /usr/share/nginx/html 目录下。
重新加载 Nginx 配置:
sudo systemctl reload nginx
浏览器测试访问 http://你的主机公网 IP/。
若外网无法访问,可能是端口未开放或被占用。例如将监听端口从 80 改为 90。
编辑 /etc/nginx/nginx.conf,将 listen 80; 改为 listen 90;。
sudo systemctl restart nginx
sudo systemctl status nginx
确保防火墙允许外部访问新端口:
sudo iptables -A INPUT -p tcp --dport 90 -j ACCEPT
sudo service iptables save
登录云服务商控制台,导航到安全组设置,添加入站规则:
curl 公网IP:90
通常因 CentOS 官方仓库停止更新导致依赖下载失败。
解决方案:
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
sudo vi /etc/yum.repos.d/nginx.repo
添加以下内容:
[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/7/$basearch/
gpgcheck=0
enabled=1
使用 Let's Encrypt 免费获取 SSL 证书。
安装 Certbot:
sudo yum install epel-release -y
sudo yum install certbot python2-certbot-nginx -y
获取并安装 SSL 证书:
sudo certbot --nginx -d 你的公网IP
sudo tail -f /var/log/nginx/error.log
sudo lsof -i :80
sudo lsof -i :90
sudo nginx -t
检查路由表、DNS 配置及网络接口。
sudo ufw allow 90/tcp
sudo ufw allow 80/tcp
sudo ufw status

微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online
JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online
Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online