教你在局域网部署前端vue+后端php的网站服务

1、阅读对象

本篇教程适合新手阅读，老手直接略过

2、教程难度

初级

本人水平有限，文章内容难免会出现问题，如果有问题欢迎指出，谢谢

正文

如今网站建设流行前后端分离，作者也应时代潮流，适用VUE做前端，后台由PHP来做接口，在开发中有许多的坑，为了填空查阅了很多资料，如今总算是圆满结束。

开发时期

在开发阶段，用的是VScode编辑器。

在创建了vue-cli脚手架后，开始开工。

1.遇到的第一个坑，开发初期后端还没确定人选，老板让我先做界面，既然是前后端分离，必定需要数据字典，HTTP协议自动转换为全小写字母。而我在编辑数据字典时，变量名掺杂了大写字母，导致后来接收参数的时候，找不到变量名。

不能定成这种大小写混合的变量名，而且还这么长，后端会骂死你的。

2.还是跨域问题，PHP大佬说他已经添加了跨域访问的代码，但是我这边还是爆跨域错误，错误如下。

vue这个跨域错误纠缠了我2天时间，期间后端各种改。

最终在我问了一圈小朋友，查询了无数资料后，才知道开发环境下vue-cli必须要配置自带的跨域代理服务，才可以跨域访问PHP后端

，

在你项目根目录下的config/index.js中配置proxyTable即可，target填写后端给你接口的域名，其他参数照抄即可。

配置完成后在你请求的接口的最前面写上/api，后面是你的接口路径，千万不要写接口域名，如下图

然后重新运行 npm run dev 即可实现vue在开发环境下跨域的问题。

接下来遇见传参问题

ajax post数据提交 PHP后台接收不到数据

测通接口后，当给后端传参，后端没收到参数。

原来是axios发送的是json格式的数据，而后端只接受传统的form data格式的数据，json后台程序不认识。

前端发的是这种application/json

知道了原因，几种解决办法如下

1.网上有很多方案说使用
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
或者
{headers:{'Content-Type':'application/x-www-form-urlencoded'}}
我试了一下，其实这样还是不行的

2.解决方案二
【还需要额外的操作，（我们要将参数转换为query参数）】
引入 qs ，这个库是 axios 里面包含的，不需要再下载了。

3.解决办法三，让你的后台改一下接收方式，让他这样接收（墙裂推荐）
作者采用的是这种方式，让后端改。

终于一切都通了，我们开始测接口把，但是.......

当登陆接口测通以后，第二接口，爆404错误，什么情况，我和后端检查代码，代码没错，那为啥会爆404错误，

经过2天的排查，问题终于被发现了，后端查询数据库，数据表中有个字段和查询语句的变量名不一致，数据库爆404，php框架就把错误返前端了，并不是接口找不到，日了狗了。

然后一路到开发完毕，项目可以上线了。问题是客户需要项目上线到他们的局域网，只提供一台电脑当作服务器。

VUE和PHP需要部署到局域网？

后端在服务器电脑上，装载了这个小东西

而我把打包好的dist目录下的文件放在了PHP文件的根目录下，然后把项目放在phpStudy下的www目录内

启动服务，能访问了，问题又出现了，前端页面接口404错误。

那前端的请求接口怎么填？填那台服务器的局域网IP？

最后解决了。不填请求IP，就写相对路径，如下图。

，

输入那台电脑的ip，测试，完成，局域网内其他电脑都能正常使用。

对了告诉大家一个小BUG，axios给php发post参数，data必须如图写，不然会爆错误。

data必须这样写

如果你这样写data:this.engititle

参数这样写

如果你这样写data:this.engititle

必定报错