Nginx 部署前端 Vue 项目全攻略

news2024/9/20 18:46:18

一、前期准备工作

alt

要将 Vue 项目部署到 Nginx ，需要做好以下准备工作：

Nginx 的安装：

- 对于 Centos 系统，可以通过 yum install -y nginx 命令来安装 Nginx 。

- 对于 Windows 系统，需要在 Nginx 官网下载相应的安装包并解压，然后双击 nginx.exe 启动。

环境配置：

- 在 Linux 系统中，安装 Nginx 可能需要一些依赖，如 yum install gcc-c++ 、 yum install -y pcre pcre-dev 、 yum install -y zlib zlib-devel 、 yum install -y openssl openssl-devel 。

- 配置 Node.js 环境，前往 Node.js 官网选择合适版本下载安装，配置环境变量。

- 安装 WebPack ，使用 npm install webpack -g --registry=https://registry.npm.taobao.org 命令。

前端项目的打包：

- 在 Vue 项目中，修改 vue.config 文件，将 publicPath: '/', 改为 publicPath: './' 。

- 注释掉 router 文件中的 mode: 'history' 。

- 执行 npm run build 命令进行打包，完成后会生成 dist 文件夹。

做好以上准备工作，就为后续的 Vue 项目在 Nginx 上的部署打下了坚实的基础。

二、Nginx 配置与部署

（一）基础配置

Nginx 的配置文件通常为 nginx.conf ，其基本结构包含全局块、events 块、http 块等。全局块主要包含与 Nginx 运行相关的全局配置，如工作进程数、错误日志路径等。events 块主要涉及网络连接相关的配置，例如设置是否允许同时接收多个网络连接、最大连接数等。http 块则涵盖了代理、缓存、日志记录、虚拟主机等众多配置。常见的参数设置如：worker_processes 用于设置工作进程数量，sendfile 用于控制文件传输方式，keepalive_timeout 用于设置连接超时时间等。

（二）Vue 项目部署

首先，将打包好的 Vue 项目中的 dist 文件夹中的所有文件上传到 Nginx 服务器的指定目录，一般为 /usr/local/nginx/html 或者您自定义的目录。然后，打开 Nginx 的配置文件 nginx.conf ，在 http 块中的 server 部分进行配置。设置监听端口，如 listen 80; ，指定服务器名称，如 server_name your_domain.com; 。接着，配置项目的访问路径，如 location / { root /usr/local/nginx/html/dist; index index.html; } ，确保 Nginx 能够正确访问到 Vue 项目的静态资源。

（三）处理路由和页面刷新问题

在 Vue 单页面应用部署到 Nginx 中时，经常会遇到路由和页面刷新导致的 404 错误。解决这个问题的关键在于正确配置 Nginx 的 location 部分。可以在 server 块中的 location / { 部分添加 try_files $uri $uri/ /index.html; 这行代码。这样，当页面刷新时，如果 Nginx 在当前路径找不到对应的资源，就会自动跳转到 index.html ，由 Vue 路由来处理页面的显示，从而避免 404 错误的出现。同时，要注意在修改 nginx.conf 文件后，执行 nginx -s reload 命令重新加载配置，使修改生效。

三、特殊情况与注意事项

（一）添加路径前缀

在某些情况下，我们可能需要为 Vue 项目添加访问路径前缀。例如，希望项目的访问路径为 http://example.com/prefix 而不是直接 http://example.com 。这可以通过修改 vue.config.js 文件来实现。在 vue.config.js 中，配置 publicPath: '/prefix' 。同时，在 Nginx 的配置文件 nginx.conf 中，相应的 location 块也要进行修改。例如，如果前缀为 prefix ，配置应类似 location /prefix { alias /your_path_to_dist; index index.html; try_files $uri $uri/ /prefix/index.html; } 。

（二）处理跨域与反向代理

跨域问题是在前后端分离开发中常见的问题。要解决跨域问题，可以在 Nginx 中进行配置。在 nginx.conf 文件的 server 块中，添加如下配置来解决跨域问题：

location /api/ {

proxy_pass http://your_backend_url;

add_header Access-Control-Allow-Origin *;

add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';

}

实现后端服务接口的反向代理，同样在 nginx.conf 中进行配置，例如：


location /backend_service/ {

proxy_pass http://your_backend_service;

}

（三）项目配置与优化

为了适应部署需求，Vue 项目本身的配置也需要进行调整。例如，对于路由懒加载，可以将较大的路由组件分割成不同的代码块，在需要访问时再进行加载，提高页面加载速度。同时，可以对静态资源进行 CDN 引入，减少项目打包体积。此外，还可以通过配置 babel-plugin-transform-remove-console 插件在生产环境中移除 console 语句，优化项目性能。

（四）常见错误与解决方案

在部署过程中，可能会遇到各种错误。比如 404 错误，可能是由于 Nginx 配置中的路径错误或者 Vue 项目的路由配置问题。如果是路径错误，需要检查 Nginx 配置中的 root 、 alias 等参数是否正确。如果是路由问题，可能需要检查 Vue 项目中的路由配置是否正确，尤其是在使用 history 模式时。另外，504 错误通常表示服务器请求超时，可以通过调整 Nginx 中的 proxy_read_timeout 参数来解决。