centosnginx部署vue项目

### 在 CentOS 上使用 Nginx 部署 Vue 项目 要在 CentOS 上使用 Nginx 部署 Vue 项目，可以按照以下方法操作： #### 1. 安装 Nginx 可以通过 RPM 包管理器快速安装 Nginx。运行以下命令来安装 Nginx： ```bash rpm -ivh http://nginx.org/packages/centos/8/x86_64/RPMS/nginx-1.20.2-1.el8.ngx.x86_64.rpm ``` 安装完成后，启用并启动 Nginx 服务： ```bash systemctl enable nginx.service systemctl start nginx.service ``` 验证 Nginx 是否正常工作，通过浏览器访问服务器 IP 地址，应该可以看到默认欢迎页[^1]。 #### 2. 构建 Vue 项目 在本地开发环境中构建 Vue 项目，确保已安装 Node.js 和 npm。切换到 Vue 项目的根目录，执行以下命令进行打包： ```bash npm run build ``` 此命令会在项目目录下生成一个名为 `dist` 的文件夹，其中包含了静态资源和入口 HTML 文件。 #### 3. 将项目上传至服务器 将 `dist` 目录中的所有文件复制到服务器上的 `/usr/share/nginx/html/` 路径下。可以使用 SCP 或 FTP 工具完成传输。例如，使用 SCP 命令如下： ```bash scp -r dist/* user@server_ip:/usr/share/nginx/html/ ``` #### 4. 配置 Nginx 编辑 Nginx 配置文件以支持 Vue 单页面应用 (SPA) 的路由功能。通常情况下，默认配置文件位于 `/etc/nginx/nginx.conf` 或者 `/etc/nginx/conf.d/default.conf`。修改配置文件的内容如下： ```nginx server { listen 80; server_name localhost; root /usr/share/nginx/html; index index.html; location / { try_files $uri /index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } } ``` 上述配置的关键在于 `try_files $uri /index.html` 行，它允许 Vue Router 正常处理前端路径[^4]。 保存更改后，重新加载 Nginx 配置使其生效： ```bash nginx -s reload ``` #### 5. 测试部署 打开浏览器，输入服务器的公网 IP 地址（如 `http://<your_server_ip>`），应能正确显示 Vue 应用首页。如果遇到任何错误，请检查日志文件 `/var/log/nginx/error.log` 获取更多信息[^2]。 --- ### 注意事项 - **防火墙设置**：确保服务器的防火墙开放了 HTTP 默认使用的 80 端口。可执行以下命令放行端口： ```bash firewall-cmd --permanent --add-port=80/tcp firewall-cmd --reload ``` - **SELinux 设置**：如果 SELinux 处于 enforcing 模式，则可能阻止 Nginx 访问某些文件。可通过临时禁用来测试是否为此原因引起问题： ```bash setenforce 0 ``` 若确认无误后再调整策略永久解决。 ---