前后端联调和真机测试以及上线

前后端联调很简单：只要修改config/index.js的内容就可以了

这里要求你的数据在服务器端的/api文件夹下面。就可以了。

 

如果服务器在不在本地怎么办呢

就不能写localhost了,而是域名,或者ip

前端请求就可以转发给任何一台服务器了.,从而非常方便地实现了前后端的联调.

当用本地的ip访问网页的时候,不可以用8080端口了(前提是前端项目已经可以请求后端数据了),但是api可以访问.,原因是因为我们的前端项目是通过webpack(npm run dev )启动的,所以不可以 采用ip来访问.

如果想 让通过ip地址来访问,这时需要把配置项修改一下

 

这时可以用手机来访问了,将手机和电脑在同一个局域网内.

 

真机测试：

这时候你就可以真机测试啦，要在一个局域网哦。

在手机里拖动ABCDEF字母的时候,不能滑动.

他可以阻止touchstart的默认行为.

如果手机比较低端的话,可能会出现 白屏的情况,如何解决让它支持promiss呢

这个包支持如果手机不支持promiss的话,就往里面添加promiss相关的包

如何上线呢？

npm run build

把前台src 目录下的代码进行打包到新生成的dist目录(数据请求应该已经连接到后台)
生成dist，把dist目录扔到后台就可以了。但是如果你想吧文件都放到一个peoject的文件夹里面。你需要进行一点配置。

此时把dist目录下的文粘贴到api同级,然后访问后台地址,就可以了.如果要修改访问路径,就要在前端修改路径

如果要把前端代码添加到project 目录下,那样的话就要修改

在config目录下的index,js里

然后重新打包

npm  run dev

 

--------------------- 
作者：simoonQian 
来源：CSDN 
原文：https://blog.csdn.net/weixin_40814356/article/details/80289467 
版权声明：本文为博主原创文章，转载请附上博文链接！