Nginx部署vue项目

在开始部署之前，我们先要准备好以下工作：

• 一个能跑通的Vue项目
• 一个正常的、安装了nginx的服务器（可以是本地电脑）
• 服务器上安装了Node.js（nodejs官网：https://nodejs.org/en/ 可下载最新LTS版本并安装）
  如果说服务器有了，nginx没安装？

那没关系，安装起来很简单，可以参考以下步骤：

安装nginx

（1）官网下载安装包。官网：http://nginx.org/en/download.html

（2）找到下载的安装包，解压缩。（nginx不需要运行安装，此时解压的位置就算是nginx安装的位置）

包解压后会得到如下目录。里面比较重要文件夹有：

conf：里面有配置文件nginx.conf

html：放打包好的vue项目

nginx.exe：nginx启动项

（3）打开配置文件conf/nginx.conf，查看配置项。

如下图，listen项为nginx监听的端口，默认是80。如果本地80端口被占用，需要修改成其他端口。

ps.想查看端口是否被占用，cmd使用命令：

// 查看所有运行的端口
netstat -ano
// 查看指定端口是否被占用（未占用返回空值，已占用返回占用信息）
netstat -aon|findstr "8081"

（4）启动nginx，有两种方法：

①双击nginx.exe，屏幕上会闪过一个黑色弹窗，意为启动完成。

②打开cmd，cd切换到nginx所在文件夹下，输入命令：start nginx，回车。

（5）打开浏览器，输入网址：http://localhost:812（假设配置文件中端口修改成812）

浏览器出现以下界面，则启动成功！

（6）关于nginx的其他命令

// 启动服务
start nginx
// 快速停止nginx
nginx -s stop  
// 完整有序的停止nginx
nginx -s quit
// 重启nginx，一般用在修改配置文件之后
nginx -s reload
//  使用taskkill命令
taskkill /f /t /im nginx.exe

nginx安装完毕，接下来就可以开始部署项目了——

一、打包并移动vue项目

运行命令：npm run build

到前端项目目录下，找到dist文件夹。复制dist下的文件，粘贴至nginx根目录下的html

二、修改配置文件nginx.conf

完成上一步后，打开我们的配置文件<nginx.conf>，找到server节点，修改参数。

初始的配置参数是这样的——

大概需要修改的配置如下：

listen：代理端口（自定义未被占用的端口号）

server_name：代理名称（域名、ip），本地就用localhost

root：项目存放目录（如果只发布一个项目，就是直接把dist拷贝到html文件夹下这种情况，可以直接用html，否则要指定文件夹）

try_files：一个覆盖所有情况的候选资源。如果 URL 匹配不到任何静态资源，返回同一个 index.html 页面

三、重启nginx，验证效果

打开cmd，输入重启命令：nginx -s reload （若配置文件没做修改可忽略这一步）

刷新浏览器，查看项目效果！

此处就不放我的项目截图了，放个白板项目凑数——

部署成功！