Vue.js项目部署到Nginx上面

第一步，下载并安装Nginx

第二步：双击Nginx.exe,会出现闪屏，此时Nginx已经启动，这样效果不好。

打开cmd命令窗口，切换到nginx解压目录下，输入命令 nginx.exe 或者 start nginx ，回车即可

第三步：检查Nginx是否启动成功，在浏览器地址栏输入网址 http://localhost:80，回车，出现以下页面说明启动成功。

如果发现是该界面，说明启动成功，如果没有成功，可能存在端口号冲突的问题，此时我们就需要改动端口号了。

检查80端口是否被占用的命令： netstat -ano | findstr 0.0.0.0:80 或 netstat -ano | findstr "80"

如果被占用，我们则需要改动端口号，并访问 http://localhost:XXXX  （XXXX是我们改动后的端口后）检查是否成功。

 

第四步：将我们打包Vue.js 项目（dist文件夹）放到Nginx路径下面

下图是原始的访问界面,访问的是html文件夹下的index.html界面

并在下面nginx中修改

保存后并重启Nginx服务器。在浏览器中访问http://192.168.20.62:XXXX