如何将vue项目部署到nginx服务器

摘自：https://blog.csdn.net/web_Fkk/article/details/118597867

一、window系统下载nginx

1. 建议下载稳定版，下载后解压到某个文件夹
2. 进入Nginx文件夹有个cmd窗口也就是(Nginx.exe)，双击启动Nginx
3. 在浏览器输入localhos，看到下面的页面就是启动成功
   

   

二、mac下载Nginx

首先，mac系统下载得用brew

安装工具：

homebrew（还没用过的小伙伴可以点链接进行了解或者自行百度）

安装完后，使用下面的命令下载Nginx，下面命令是下载的国内源，因为下载国外的话非常非常慢，所以我选择了下载国内源

/bin/zsh -c “$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)”

完成后，在终端输入下列命令，查看Nginx安装目录

open /usr/local/etc/Nginx/

成功打开了Nginx目录，也可以看到servers目录以及Nginx.conf的配置文件（后面会用到这个配置文件）。但我们并没有找到Nginx被安装到了哪里。

终端继续执行：

open /usr/local/Cellar/Nginx //其实这个才是Nginx被安装到的目录

启动Nginx，终端输入如下命令

Nginx

没有报错即为启动成功。

打开浏览器访问localhost,就会能看到Nginx的欢迎界面啦。

**

部署项目到Nginx

**

（1）第一种方法：
将使用npm run build打包好的项目，找到Nginx文件下的html文件夹将里面的内容替换为dist文件夹里面的内容，然后刷新一下页面即可。

（2）第二种方式：
就是将dist整个文件夹复制到Nginx的文件夹下（与html文件夹同级），该方法要到 conf文件夹下Nginx.conf文件里面修改相关配置

该文件里面的location / {} 里面的root就是解压Nginx的目录，意思是说，默认打开的是root（也就是根目录）下的HTML里面的index.html/index.htm的网页，也就是第一种方式打开部署到Nginx项目的途径

采用第二种方式部署的话，就要修改这里面的路径配置（将html修改为dist），如下图：

修改完后要重启Nginx，要重启才能生效。

sudo Nginx -s reload // 修改配置后重新加载生效

sudo Nginx -s stop // 快速停止Nginx