ThinkPHP+Vue的单页面的部署经历

背景

上个学期在学校有个类似于课程设计吧,老师让我们做一个网站嘛,然后当时那个项目就用原生的php实现了一下,然后就没管它了,后来上个星期吧,老师找到我,希望我把那个项目完善一下,恰好当时在做一个Vue的项目练手,然后想着能不能用Vue把项目重构一下,这个项目期间做起来还好,就是部署的时候,那叫一个懵逼啊,记一下这次的经历吧!

前言

这个项目分析了一下,好像不需要后台,是个单页面应用,THinkPHP框架提供接口,前端用Vue实现,怎么简单怎么来吧,再网上找了一圈的Think PHP+vue如何部署,无果,遂自己钻研,期间无数碰壁,留下了没有技术的泪水,因为本身是没有了解过ThinkPHP这个框架的,再加上用的版本是5.0的,坑有点多,大家小心,实在解决不了,可以给我留言,大家一起解决

部署流程

  1. 这里我为了省时省力(鬼知道我反反复复安装了多少遍)装了宝塔面板,安装命令可以见官网,我也贴一下吧

    Centos:yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

    Ubuntu/Deepin:wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh

  2. 安装完成之后会出现一个链接 还有用户名、密码,打开链接,我们就可以进入控制面板了,这里注意一下哦,最好把这个链接添加到书签,当然如果忘记的话,网上也是有很多教程的,这里不再赘述

  3. 进入面板后,会让你安装软件包,这里大家选择在本地项目使用到的软件版本就好,下面是我是用到的软件版本

    image-20200411190113443

  4. 安装完成后呢,点击左边的网站,点击添加站点,这里注意一下哦,如果大家原先一开始在服务器上就部署过相应的网站,它是不会记录你的网站信息的,一开始我天真的一位宝塔面板就会接管我原先的项目,大概是我想多了吧。点击添加站点之后让你填域名啥啥啥的,就照着填嘛,有啥填啥,大家应该都懂吧,这里我贴一下我的,这个根目录可以先照着它默认的填,问题不大,数据库我们根据实际情况进行创建

  5. 以上做好了之后,就可以把你在本地跑通的项目,放在服务器上了,先上传ThinkPHP项目,这里我上传到了默认根目录下 这个class-api就是我的think PHP项目了

    image-20200411190931402

  6. 打开刚才添加站点的地方,把伪静态的那个选上,像这样

image-20200411191115342

  1. 这样弄好后,可以用Postman工具或是直接在浏览器访问你的thinkPHP看一下是否能够访问,这里出现的一些问题我会在最后贴出来,先跟着流程走一遍,大家别急

  2. 接着将你的Vue项目打包好的dist文件夹,先在本地打开看一下是否能够访问,我的这里出现了一些问题,最后我也会统一贴出来,将dist文件夹放到你Vue项目的public文件夹下

    image-20200411191620584

  3. 然后将你dist文价夹下的所有东西拖到public目录下,就像上面图片那样

  4. 修改默认文档

    image-20200411191921781

  5. 重启你的apache服务器,是否能够跑通呢,没跑通?别急,下面还有问题汇总

问题汇总

问题一. 部署ThinkPHP项目的时候出现控制器找不到或是模块找不到

答:先检查自己的项目本身是不是有问题,如果没问题的话,看一下路由,我这里在本地部署的时候,设置了一个二级域名,显然在服务器上是不需要的,图片中画横线的地方千万注意

image-20200411192407277

问题二 关于数据库的问题

答: 数据库照图片中那样就行

image-20200411192530662

问题三 ThinkPHP项目部署后出现500状态码

答: 这个问题可以去我们的apache服务器看一下错误日志

image-20200411192714221

image-20200411192806172

我的报错原因是因为什么响应头不规范的问题,于是我修改了我的跨域配置,果然就是它,这个问题困扰了我两天,才得以解决,可惜错误日志没有截图下来,有点可惜,大家也可以将这个错误日志先复制到翻译软件上,自己试着看看能不能看得懂,看不懂的话再进行百度,有时候比你直接百度要更快解决问题

问题四,Vue项目部署到服务器上看不到页面或是页面错误

答: 需要修改一下这个

image-20200411193421658

然后重新npm run build 之后再重新放到服务器上即可

总结

这次的项目给我的最大的一个收获就是,千万不要急,急起来的情况就是一碰到问题马上百度,然后照着改,有时候普遍问题,可能可以解决,但是遇到一些深层次的问题的时候,往往就会四处乱改,这里碰一下,那里改一下,很可能一天了bug都没有解决,就像我一样,还有就是千万要把文档读透,这次的ThinkPHP框架之前都没用过,网上找了个教程就开始了,前后不到一个星期就把项目完成了,感觉还是有点草率,总之,大家遇到问题还是先要冷静、冷静。

大家如果有什么问题,欢迎下方留言,我们一起解决!