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

水深无声 2022-04-13 04:27 356阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70][]

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

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

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 1][]

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

真机测试：

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 2][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 3][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 4][]

如何上线呢？

npm run build

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

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

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

在config目录下的index,js里

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 5][]

然后重新打包

npm  run dev

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70]: /images/20220413/884e595ffeac4a6e8c13b1f94ce2f2d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 1]: /images/20220413/a37d28d62f224eaab6bec2c9ee5abd50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 2]: /images/20220413/855bb9c9f3044791a23083a142869eb7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 3]: /images/20220413/b0caa8bf2ebd4473adf116a5ea211d24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 4]: /images/20220413/9cbc7285574f4a0a8aaef9ae1ce10a49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70 5]: /images/20220413/e9486f37ac0248d085106a0a97d835ef.png