从入门到精通：RuoYi-Vue3 分离版前端配置二级域名

在 Nginx 下配置 RuoYi-Vue3 分离版前端的二级域名

随着云计算和微服务架构的兴起，将前端和后端分离已成为一种流行的开发模式。RuoYi-Vue3 分离版前端就是一款基于 Vue3、Element Plus 和 Vite 的现代化前端框架。而 Nginx 作为一款强大的 Web 服务器，可为 RuoYi-Vue3 分离版前端提供反向代理和负载均衡等服务。本文将手把手教你如何将 RuoYi-Vue3 分离版前端在 Nginx 下配置二级域名，助力你的项目更安全、更高效。

前期准备

在开始配置之前，你需要确保以下条件已经具备：

• 已安装 Nginx 和 RuoYi-Vue3 分离版前端。
• 拥有一个二级域名。
• 准备好 SSL 证书（可选，但强烈推荐）。

配置 Nginx

1. 打开 Nginx 配置文件，通常位于 /etc/nginx/nginx.conf。
2. 添加以下配置片段：

server {
    listen 80;
    server_name example.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name example.com;
    ssl_certificate /path/to/certificate.crt;
    ssl_certificate_key /path/to/certificate.key;

    location / {
        proxy_pass http://localhost:8080;
    }
}

• 替换 example.com 为你的二级域名。
• 替换 /path/to/certificate.crt 和 /path/to/certificate.key 为 SSL 证书路径（如果你选择了使用 SSL）。
• 替换 8080 为 RuoYi-Vue3 分离版前端的端口号。

配置 RuoYi-Vue3 分离版前端

1. 打开项目根目录下的 .env 文件。
2. 添加以下配置：

VUE_APP_BASE_API = https://example.com/api

• 替换 example.com 为你的二级域名。
• 替换 api 为你的后端 API 路径。

运行 RuoYi-Vue3 分离版前端

1. 在项目根目录下运行以下命令：

npm run serve

2. 访问你的二级域名，即可看到 RuoYi-Vue3 分离版前端。

常见问题解答

1. 访问二级域名时提示“404 Not Found”

• 检查 Nginx 配置是否正确。
• 检查 RuoYi-Vue3 分离版前端的端口号是否正确。
• 确保 RuoYi-Vue3 分离版前端正在运行。

2. 访问二级域名时提示“502 Bad Gateway”

• 检查 Nginx 配置是否正确。
• 检查 RuoYi-Vue3 分离版前端的端口号是否正确。
• 确保 RuoYi-Vue3 分离版前端正在运行。
• 检查后端 API 是否正常运行。

3. 访问二级域名时提示“SSL 连接错误”

• 检查 SSL 证书是否正确安装。
• 检查 SSL 证书是否有效。
• 检查浏览器是否支持 SSL 连接。

4. 如何使用 HTTPS 访问二级域名？

• 在 Nginx 配置中配置 SSL 证书。
• 在 RuoYi-Vue3 分离版前端的 .env 文件中将 VUE_APP_BASE_API 设置为 https。

5. 如何配置多个二级域名指向同一前端？

• 在 Nginx 配置中添加多个 server 块，每个块配置一个不同的二级域名。
• 确保每个 server 块指向同一后端。

结语

通过遵循本教程，你将能够在 Nginx 下配置 RuoYi-Vue3 分离版前端的二级域名，让你的项目更加安全、稳定和高效。如果你在过程中遇到任何问题，请随时查看本文中的常见问题解答部分，或在评论区留言提问。愿这篇文章对你的项目开发有所帮助！