使用nginx部署web项目

第一种配置方法

1.下载nginx并安装

windows电脑上演示
http://nginx.org/ 下载一个版本打开

nginx.PNG

双击nginx.exe运行，如果运行不起来，查找相关占用接口的程序结束掉

在浏览器中输入localhost
当出来以下界面说明运行成功

runnginx.PNG

2.打包web项目

//通过以下命令打包项目，在项目目录下会生成dist文件夹
npm run build

3.将打包好的dist文件夹中的内容复制到nginx的html目录下

nginx-html.PNG

在浏览器中输入localhost回车，则项目成功部署在本地了。

第二种配置方法

1.通过以下命令打包项目

npm run build

2.将dist文件夹复制到nginx根目录下

根目录下放dist.PNG

3.打开nginx/conf/nginx.conf 文件修改默认配置为dist

默认配置为打开html文件夹下的index.html

config.PNG

修改为dist

修改为dist.PNG

4.打开浏览器输入localhost成功部署

如果在这之前打开了nginx服务，第二次配置完需要先结束掉进程再重新启动才能生效。