前言:实习也快半年了,一直都是在学习前端,对于打包部署上线这玩意都是觉得好高大上,好难,昨天学习完了之后就发现也就这么回事,一点都不难(当然上线我还没学到)
据我所了解的服务器有nginx服务器,Apache tomcat服务器(我的天哪,原来tomcat是个服务器,我TM Java Web学了啥),nginx服务器是个轻量级、又简单的服务器,身边的同事都有用到nginx,所以我就用它来部署vue项目了
步骤
- 将vue项目打包 npm run build 完事(是不是超级简单)
- 下载nginx服务器,安装配置啥的,然后启动就这么简单
- 事后我们来讲一下注意事项
一、vue项目打包
真的就是直接输入命令npm run build
打包,打包成功之后会发现目录多了一个dist文件夹
二、下载nginx服务器,安装配置
下载安装nginx的方式多种多样,可以通过yum install nginx
命令在cmd中安装,但是这种安装会导致文件夹稀碎,后期配置的时候想死,所以就不推荐用这种方式安装,推荐 源码安装(直接从官网下载安装)
官网下载地址:http://nginx.org/en/download.html,这里我选择的是稳定版,这个自己根据情况来选吧,我也不太懂要选什么版本
下载完后,解压,然后安装启动的方式
- 可以是直接点击nginx.exe启动
- 也可以是在cmd中启动
- 然后在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快要完了,还是要哈哈哈哈哈哈哈哈哈…