VueThink是一款前后端完全分离开发的框架,受到比较多的开发人员的喜爱,但是大部分人开发完后,到部署之后,会有一个问题,比较困扰,博主,也受到这个问题的困扰,现在把大致的思路阐述一下
开发完成之后
需要进行部署,但是由于Vue的特性,每次启动都是需要进入cmd命令行去npm rundev ,部署线上之后就需要能直接运行,不能每次运行都要去打开cmd命令行.
首先需要将前端部分中的后端请求地址改掉
(如果在本地测试的话,可以先不改地址,直接在本地测试)
改为你服务器上PHP部分放置的具体的地址
根据各个Vue版本的不同,存放调用后端地址的文件也不同,具体的版本以及位置的区别,请大家自行去查阅Vue官方的文档,这么不在详述.
然后,在线上服务中把PHP部分直接放置进去,具体的方式,根据ftp上传或者svn上传均可
然后回到本地
在cmd命令行中,切换到frontEnd下,npm run build
出现一个dist文件,即为成功
将dist文件传至服务器frontEnd(自己建立)目录下
然后进入xampp的配置文件,去配置信息
填写配置信息,新增的5008端口
新增监听项
重启apache,查看是否监听刚刚开的5008端口
然后,打开
很明显,出错的原因,是刚开始的时候,PHP部分的数据库配置没有改,还是本地的127.0.0.1,而且数据库用户名和密码没有改
成功搞定,初步完成
但是进去之后,在操作的时候还有一个蛋疼的问题(上图是实际服务器页面,bug已经处理好,下面用本地的做情况说明)
就是,你点进去之后,如果进入一个一面,直接点进去,没问题,不会出现什么问题,但是一旦刷新的话,在会报错,404
例如,用本地的来做个测试说明
由于,Vue的特性,导致运行的dist文件,必须是根目录下,必须要提前配置好,如果是以端口号加文件目录的方式,则无法访问,本地建立虚拟站点
点进去,正常
但是当刷新的时候,即304重定向的时候,
究其原因,是因为,创建好dist文件后,并没有实际存在的home文件夹/menu方法,list方法或者html页面,都不存在,是js动态生成的,所以,实际的地址会报错.
因为Vue用的是单页面应用,用的虚拟的路由.
Apache的修改需要修改http-vhosts.conf的配置,
添加中间的一段代码
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
即可避免出现上图的错误,但是这样的缺点是,失去了404页面报错的页面,需要自己额外做一个404页面来跳转
如下,刻意给index添加12,报错如下
如下,304重定向之后,仍然,正常出现
404页面需要自己重新做一个,否则就显示一个黑屏或者是框架自带的不完整的显示图
有不足之处请多改正
本人日常的经验总结,iis服务器未能修改成功,Nginx未用到,谨此总结一下Apache上的处理.希望会帮到遇到同样困难的人.