1. 项目构建
首先，你需要构建 Vue.js 项目，这一步将你的源代码打包成可以部署的静态文件。
1.1 安装依赖
确保项目中所有依赖都已安装。如果还没有安装依赖，可以运行以下命令：
npm install
1.2 构建项目
使用以下命令来打包项目：
npm run build
这会生成一个 dist/ 目录，里面包含了所有需要部署的静态资源。
2. 配置 Nginx
Nginx 是一个高性能的 HTTP 和反向代{过}{滤}理服务器，用于托管静态文件、负载均衡等。
2.1 安装 Nginx
首先确保 Nginx 已安装。如果还没有安装，可以根据操作系统使用以下命令进行安装：
Ubuntu/Debian:
sudo apt update
sudo apt install nginx
CentOS/RHEL:
sudo yum install nginx
MacOS:
brew install nginx
安装完成后，你可以通过以下命令启动 Nginx：
sudo systemctl start nginx
2.2 Nginx 配置文件
Nginx 的主要配置文件通常位于 /etc/nginx/nginx.conf 或 /etc/nginx/conf.d/default.conf。你需要编辑这个文件来配置 Nginx 以托管你的 Vue.js 项目。
使用以下命令打开配置文件：
sudo nano /etc/nginx/conf.d/default.conf
或者：
sudo nano /etc/nginx/nginx.conf
在配置文件中，添加或修改以下配置：
server {
listen 80;
server_name your_domain_or_ip;
root /var/www/html/dist; # 指向Vue项目的build目录
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html;
}
# 如果需要，可以在这里添加其他配置，例如代{过}{滤}理API请求等
}
2.3 配置解释
listen 80: 配置服务器监听 80 端口，这是 HTTP 的默认端口。
server_name: 配置服务器名称，你可以使用域名或 IP 地址。
root: 设置 Nginx 的根目录，即 Vue.js 项目的 dist/ 目录。
index: 指定默认首页文件，通常是index.html。
location /: 这部分配置了路由规则，try_files $uri$uri/ /index.html;确保了当请求路径不存在时，Nginx 会将请求重定向到 index.html，这是单页应用（SPA）路由的必要配置。
3. 部署项目到服务器
将构建好的 Vue.js 项目部署到服务器的 root 目录。
3.1 上传文件
你可以使用 scp 或者 FTP 等工具将 dist/ 目录上传到服务器上的 /var/www/html/ 目录。
例如，使用 scp：
scp -r dist/* user@your_server_ip:/var/www/html/
3.2 重启 Nginx
上传文件后，重启 Nginx 以应用新的配置：
sudo systemctl restart nginx
4. 测试部署
在浏览器中访问 http://your_domain_or_ip，检查 Vue.js 应用是否正常加载。
5. (可选) 配置 HTTPS
为了安全性，建议配置 HTTPS。你可以使用 Let’s Encrypt 免费获取 SSL 证书并自动配置 Nginx。
使用 certbot 工具安装 SSL 证书：
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d your_domain
Certbot 会自动修改 Nginx 配置文件，添加 SSL 支持。
6. 常见问题排查
404 错误: 确保 try_files 配置正确，Vue.js 是一个单页应用，需要配置所有未匹配的路径指向 index.html。
端口问题: 如果你在非 80 端口上运行 Nginx，请确保防火墙允许该端口的访问。
按照以上步骤配置和部署 Vue.js 应用，你的应用应该可以顺利运行在Nginx 上。如果遇到任何问题，可以检查 Nginx 错误日志(/var/log/nginx/error.log) 进行调试。
发表于 2024-11-30 09:29
