Nginx 部署前端 Vue 项目实战指南

一、环境准备

1. 安装 Nginx

首先，需要在服务器上安装 Nginx。Nginx 是一款轻量级、高性能的 HTTP 和反向代理服务器。安装方式因操作系统而异。

• Linux 系统（以 Ubuntu 为例）：sudoapt-get updatesudoapt-getinstall nginx
• Windows 系统： 从 Nginx 官方网站下载安装包，按照安装向导进行安装。

2. 安装 Node.js

Vue 项目的运行依赖 Node.js 环境。访问 Node.js 官方网站（https://nodejs.org/en/），下载适合您操作系统的安装包并进行安装。安装完成后，在命令行中输入

node -v

和

npm -v

来验证安装是否成功。

3. 准备 Vue 项目

确保您有一个可以正常运行的 Vue 项目。如果还没有，可以使用 Vue CLI 来创建一个新项目。

npminstall-g @vue/cli
vue create my-vue-project

在项目开发完成后，使用以下命令进行打包：

npm run build

打包完成后，会生成

dist

文件夹，用于后续的 Nginx 部署。

二、项目打包

（一）打包命令

在 Vue 项目中，可以使用

npm run build

命令来打包项目。在执行此命令之前，需要确保路由配置中的模式正确。如果使用了 history 模式，可能会在打包部署后出现问题，建议将其修改为 hash 模式或者直接注释掉

mode

这一配置项。

const router =newVueRouter({/*mode: 'history',*/mode:'hash',routes:[]})

另外，还需要对项目中的一些配置文件进行修改，比如在

vue.config.js

文件中添加路径配置

publicPath: './'

，以确保打包后的资源路径正确。

（二）常见问题与解决

• 路径报错：在打包过程中，可能会出现路径报错的情况。常见的解决方法是在 config/index.js 中，将 assetsPublicPath: '/' 修改为 assetsPublicPath: './'。如果项目中使用了自定义的打包配置文件，如 vue.config.js，也要确保其中的路径配置正确。
• 页面空白：页面空白是打包后常见的问题之一。可能的原因包括路径配置错误、路由模式不正确等。路径配置方面，按照上述提到的修改 assetsPublicPath 的方法进行处理。路由模式上，如果使用了 history 模式且没有后端的相应配置，建议将其修改为 hash 模式。另外，还需要检查图片、字体等资源的路径是否正确，必要时在相关配置文件中进行调整。

三、Nginx 配置与部署

（一）Nginx 安装

• Windows 系统： 您可以从 Nginx 官方网站下载安装包，然后按照安装向导进行安装。安装完成后，可在命令行中输入 nginx 启动 Nginx 服务。
• Linux 系统（以 CentOS 为例）：sudo yum install-y gcc-c++ pcre pcre-devel zlib zlib-devel openssl openssl-develsudowget http://nginx.org/download/nginx-1.22.1.tar.gzsudotar-zxvf nginx-1.22.1.tar.gzcd nginx-1.22.1sudo ./configuresudomakesudomakeinstall
• macOS 系统：brew install nginx

（二）项目部署

首先，将打包生成的

dist

文件夹移动到 Nginx 的相关目录。在 Windows 系统中，通常为

C:\nginx\html

；在 Linux 系统中，可能为

/usr/local/nginx/html

。

然后，修改 Nginx 的配置文件（通常为

nginx.conf

）。找到

server

部分，设置项目的根目录和相关路由。

最后，重新启动 Nginx 服务使配置生效。

（三）配置修改

要修改 Nginx 的配置文件，例如修改端口，可在

nginx.conf

文件中找到

listen

指令，将默认的 80 端口修改为您想要的端口，如

listen 8080;

。

修改服务名称，在

server_name

指令后指定新的名称，如

server_name myvueproject.com;

。

修改完成后，保存配置文件，并在命令行中执行相应命令重启 Nginx 服务。在 Linux 系统中，通常使用

sudo systemctl restart nginx

命令；在 Windows 系统中，可通过任务管理器结束 Nginx 进程后重新启动。

四、访问与验证

（一）启动 Nginx 服务

• Windows 系统： 按组合键【win+r】打开 “运行” 对话框，输入 cmd，回车打开 cmd 命令行窗口。在打开的 cmd 命令窗口中利用 cd 命令切换到 Nginx 服务安装的目录。输入命令：start nginx.exe，回车，即可启动 Nginx 服务。可以在任务管理器的进程中看到启动的 Nginx 服务。
• Linux 系统：sudo systemctl start nginxsudo /etc/init.d/nginx start可以使用以下命令检查服务状态：sudo systemctl status nginxsudo /etc/init.d/nginx status
• macOS 系统： 打开终端，输入 brew services start nginx 启动 Nginx 服务。

（二）通过浏览器访问验证部署是否成功

在浏览器地址栏中输入

http://localhost

（如果修改了端口，则输入

http://localhost:端口号

）。如果出现 Vue 项目的页面，说明部署成功。如果出现 404 错误或者其他错误页面，需要检查 Nginx 配置、项目路径等是否正确。