【运维、Nginx】解决：在新环境部署web项目时，显示空白页面，但所有资源单独打开都是正常的

### 如何使用 Nginx 1.22 郑重部署 Vue 前端项目 #### 一、准备工作 为了顺利部署 Vue 前端项目，需满足以下条件： - **Nginx 安装**：确认已安装 Nginx 版本为 1.22 或更高版本。可以通过命令 `nginx -v` 查看当前版本[^1]。 - **Vue 项目构建完成**：确保 Vue 项目已完成构建，并生成了静态文件（通常位于 `dist/` 文件夹）。可通过执行 `npm run build` 实现打包操作[^4]。 --- #### 二、配置 Nginx 部署 Vue 项目 以下是基于 Nginx 1.22 的具体配置方法： 1. **上传静态资源** 将 Vue 项目打包后的 `dist/` 文件夹中的内容上传至服务器上的指定目录，例如 `/var/www/html/vue-app/`[^5]。 2. **编辑 Nginx 配置文件** 修改默认的 Nginx 配置文件或新建一个站点配置文件。假设我们修改的是默认配置文件 `/etc/nginx/sites-available/default`，其内容如下所示： ```nginx server { listen 80; server_name your-domain.com; root /var/www/html/vue-app/; index index.html; location / { try_files $uri /index.html; } location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?)$ { expires max; add_header Cache-Control "public"; } } ``` 上述配置解释： - `listen 80;` 表示监听 80 端口。 - `server_name` 替换为你实际使用的域名或 IP 地址。 - `root` 设置为 Vue 应用程序的根目录。 - `try_files $uri /index.html;` 处理单页应用 (SPA) 路由问题，确保所有未匹配的请求都返回 `index.html`[^1]。 - 缓存策略部分优化静态资源加载速度。 3. **测试配置并重启服务** 测试 Nginx 配置是否正确无误： ```bash sudo nginx -t ``` 如果没有错误提示，则重新启动 Nginx 使更改生效： ```bash sudo systemctl restart nginx ``` --- #### 三、常见问题排查 1. **页面空白** 若访问页面显示为空白，请检查 Vue Router 是否设置为 `history mode` 并调整 Nginx 配置以支持该模式[^1]。 2. **跨域问题** 当前端调用后端 API 出现 CORS 错误时，可在 Nginx 中添加代理规则解决。例如： ```nginx location /api/ { proxy_pass http://backend-server-address/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } ``` 3. **SSL/TLS 支持** 若要启用 HTTPS 访问，可引入 Let's Encrypt 提供的免费证书，并更新 Nginx 配置文件中的 `ssl_certificate` 和 `ssl_certificate_key` 参数[^5]。 --- ### 结论 通过以上步骤即可实现使用 Nginx 1.22 成功部署 Vue 前端项目的目标。此过程涉及准备阶段、配置编写以及后续维护等多个环节，每一步都需要严格遵循最佳实践以保障系统的稳定性与性能[^3]。