在 CentOS 系统上部署一个 Vue.js 项目是前端开发者走向全栈或运维的常见一步，这个过程涉及将开发完成的 Vue 应用编译成静态文件，并通过 Web 服务器（如 Nginx）在公网上提供服务，本文将详细介绍这一流程，确保部署过程清晰、高效且安全。
环境准备
在开始部署之前,确保你的 CentOS 服务器已经准备就绪，推荐使用 CentOS 7 或更高版本，我们需要安装必要的软件：Nginx、Node.js 和 Git。
安装 Nginx
Nginx 是一个高性能的 HTTP 和反向代理服务器，非常适合托管静态文件。
# 使用 yum 或 dnf 安装 EPEL 仓库（如果尚未安装） sudo yum install -y epel-release # 安装 Nginx sudo yum install -y nginx # 启动 Nginx 并设置开机自启 sudo systemctl start nginx sudo systemctl enable nginx
安装 Node.js 和 npm
虽然 Vue 项目通常在本地构建，但在服务器上安装 Node.js 环境可以方便直接拉取代码并构建，实现自动化部署的基础，推荐使用 NodeSource 提供的脚本以获取较新的 Node.js 版本。
# 获取并执行 NodeSource 安装脚本（以 Node.js 18.x 为例） curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash - # 安装 Node.js (npm 会一同被安装) sudo yum install -y nodejs # 验证安装 node -v npm -v
安装 Git
Git 用于从代码仓库（如 GitHub, GitLab）拉取你的项目代码。
sudo yum install -y git
项目构建与上传
部署流程的核心是获取项目源码,将其编译成浏览器可识别的静态 HTML、CSS 和 JavaScript 文件。
克隆项目代码
选择一个合适的目录来存放你的项目,/var/www。
# 创建目录 sudo mkdir -p /var/www # 进入目录 cd /var/www # 克隆你的项目（替换为你的仓库地址） sudo git clone https://github.com/your-username/your-vue-project.git
安装依赖并构建项目
进入项目目录,安装所有依赖包，然后执行构建命令。
# 进入项目目录 cd your-vue-project # 安装项目依赖 sudo npm install # 构建生产环境版本 sudo npm run build
构建完成后,项目目录下会生成一个 dist 文件夹，这个文件夹包含了我们需要的所有静态文件。
配置 Nginx
我们需要配置 Nginx，使其能指向 dist 文件夹并正确处理 Vue Router 的请求。
创建 Nginx 配置文件
为你的项目创建一个独立的 Nginx 配置文件，便于管理。
sudo vim /etc/nginx/conf.d/your-vue-app.conf
编写配置内容
在打开的文件中,粘贴以下配置，请根据实际情况修改 server_name 和 root 路径。
server {
listen 80;
server_name your_domain.com; # 替换为你的域名或服务器IP
root /var/www/your-vue-project/dist; # 指向你的 dist 文件夹
index index.html index.htm;
location / {
# 这一行是关键，用于支持 Vue Router 的 history 模式
try_files $uri $uri/ /index.html;
}
# 可选：配置静态资源缓存
location ~* .(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# 错误页面
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
} 测试并重启 Nginx
在应用新配置前,务必检查其语法是否正确。
# 测试 Nginx 配置 sudo nginx -t # 如果显示 syntax is ok 和 test is successful，则重启 Nginx sudo systemctl restart nginx
防火墙与安全策略配置
为了确保外部可以访问你的网站,你需要开放相应的端口，并处理可能的 SELinux 安全限制。
配置防火墙
CentOS 默认使用 firewalld，你需要开放 HTTP (80) 和 HTTPS (443) 端口。
# 开放 HTTP 服务 sudo firewall-cmd --permanent --add-service=http # 开放 HTTPS 服务（为将来配置 SSL 做准备） sudo firewall-cmd --permanent --add-service=https # 重载防火墙规则 sudo firewall-cmd --reload
处理 SELinux 问题
SELinux 是 CentOS 的安全模块，它可能会阻止 Nginx 访问 /var/www 目录下的文件，如果遇到 403 Forbidden 错误，这很可能是原因之一。
# 修改 /var/www/your-vue-project/dist 目录及其所有文件的安全上下文 sudo chcon -Rt httpd_sys_content_t /var/www/your-vue-project/dist
至此,你的 Vue 项目应该已经成功部署在 CentOS 服务器上了，在浏览器中输入你的域名或 IP 地址，即可看到应用。
相关问答 FAQs
部署后页面刷新出现 404 Not Found 错误，但首页和通过路由跳转的页面正常，这是为什么？
解答： 这是 Vue Router 使用 history 模式时的典型问题，当用户直接访问或在 https://your_domain.com/about 这样的子路由刷新页面时，浏览器会向服务器请求 /about 这个路径的文件，但服务器上实际上并不存在 about.html 这个文件，只有 index.html，服务器返回 404 错误。
解决方法： 正如上文 Nginx 配置中提到的，关键在于 location / 块中的 try_files $uri $uri/ /index.html; 指令，它的作用是：Nginx 首先尝试访问用户请求的 URI（$uri），如果找不到，再尝试访问 URI 对应的目录（$uri/），如果还是找不到，最终将请求内部重定向到 /index.html，这样，Vue Router 就能接管路由，并根据 URL 渲染出正确的组件，请确保你的 Nginx 配置文件中包含这一行。
浏览器访问网站时出现 Nginx 的 403 Forbidden 错误，可能有哪些原因？
解答： 403 Forbidden 错误表示服务器理解了请求，但拒绝执行它，通常由以下几个原因导致：
- Nginx 配置错误：
root或index指令指向了错误的路径或文件，请仔细检查/etc/nginx/conf.d/your-vue-app.conf文件中的root路径是否准确无误地指向了你的dist文件夹。 - 文件权限不足： Nginx 运行时使用的用户（通常是
nginx或apache）没有权限读取dist目录或其内部文件，可以尝试修改目录权限，但更推荐的方法是使用chown确保文件所有者正确，或者使用chmod赋予其他用户读权限。 - SELinux 限制： 这是在 CentOS 上最常见的原因之一，SELinux 的安全策略可能阻止了 Nginx 进程访问非标准目录下的文件，解决方法就是执行
sudo chcon -Rt httpd_sys_content_t /path/to/your/dist命令，为dist目录及其所有内容设置正确的 SELinux 文件安全上下文，允许 Web 服务器访问。
【版权声明】：本站所有内容均来自网络，若无意侵犯到您的权利，请及时与我们联系将尽快删除相关内容!
发表回复