VueThink部署线上

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上的处理.希望会帮到遇到同样困难的人.

-------------------------------------------------------------分割线----------------------------------------------------------

后来又发现了一个新的方式

 

只需要把main.js里面的mode模式改一下,改成hash模式,就可以了 

然后地址都会中间夹杂一个#号