vue项目部署到服务器nginx以及手机端测试

前言：实习也快半年了，一直都是在学习前端，对于打包部署上线这玩意都是觉得好高大上，好难，昨天学习完了之后就发现也就这么回事，一点都不难（当然上线我还没学到）

据我所了解的服务器有nginx服务器，Apache tomcat服务器（我的天哪，原来tomcat是个服务器，我TM Java Web学了啥），nginx服务器是个轻量级、又简单的服务器，身边的同事都有用到nginx，所以我就用它来部署vue项目了

步骤

1. 将vue项目打包 npm run build 完事（是不是超级简单）
2. 下载nginx服务器，安装配置啥的，然后启动就这么简单
3. 事后我们来讲一下注意事项

一、vue项目打包

真的就是直接输入命令npm run build打包，打包成功之后会发现目录多了一个dist文件夹

二、下载nginx服务器，安装配置

下载安装nginx的方式多种多样，可以通过yum install nginx命令在cmd中安装，但是这种安装会导致文件夹稀碎，后期配置的时候想死，所以就不推荐用这种方式安装，推荐 源码安装（直接从官网下载安装）
官网下载地址：http://nginx.org/en/download.html，这里我选择的是稳定版，这个自己根据情况来选吧，我也不太懂要选什么版本

下载完后，解压，然后安装启动的方式

1. 可以是直接点击nginx.exe启动
   
2. 也可以是在cmd中启动
   
3. 然后在conf文件夹中找到nginx.conf文件配置
   

• 端口我习惯改为8080，如果有冲突的话，可以自己修改为其他的端口号8081啊什么的
• location那里的话root 指向的是你的vue项目进行打包过后的dist文件夹的路径（当然这里可以写相对路径，也可以像我那样子写都没问题），这时候重启nginx服务（cmd输入：nginx.exe -s reload）然后去网页打开就可以 了（这时候还只是可以用localhost：8080去访问，如何用ip地址访问也就是可以在手机端进行测试下面会讲到）

• 大家应该注意到我的location那里还添加多了一行 try_files $uri $uri/ /index.html;

 try_files $uri $uri/ /index.html;

这是因为你们点击刷新按钮之后页面会变成这样

加上那句再刷新就没问题了，这个知识点在vue-router的HTML5 History的模式中有提及到

三、手机端测试

到这里基本上就部署就完成了，但是但是如果你想要在手机端测试的话，你就必须要用到你的ip地址，在你的vue项目中的config文件夹中找到index.js文件，host：‘localhost’修改为

host: '0.0.0.0'

当然你也可以改为你的ip地址，但是如果你的ip地址是经常变动的话，还是像我这样改比较好。然后再重新打包，重启nginx就可以了，然后用你的ip地址去访问，就可以访问了

这里还要注意一点就是如果在手机端进行测试，网络连接的ip地址要在同一个网段

终于讲完了，好开心好开心,2019快要完了，还是要哈哈哈哈哈哈哈哈哈…