vue实现spa实例讲解:前后分离

前提

首先是因为我的这个vue的项目编译过后放到thinkjs里面居然显示不出来,我不明白为什么,资源都加载完成了而且还是没有报错。我想了很久。

开发阶段显示没问题,编译阶段没问题,但是放到thinkjs里面之后久显示不全了。所以我猜测应该是里面有写编码被thinkjs认为是thinkjs里面的模版认可的编码,所以导致显示有问题。

但是我没有办法解决这个问题。所以我换了其他套路,因为这个项目我一开始就是想要实现前后分离的。所以我就想,怎么去实现,我就到网站找vue在nginx的反向代理配置和实现。


思路

  1. 首先是前端实现一个项目,所以nginx是实用配置文件实现一个静态文件的服务配置。
  2. 前端配置好了之后就需要配置后台了,这个时候我才发现thinkjs就是使用反向代理来部署的,它是用了pm2来进行端口监控,然后用nginx来反向代理监控的端口。
  3. 前后都搭建好了之后,到了最麻烦的时候了,就是ajax的跨域问题,因为前端需要用到后台的接口,所以我们需要让后台开放接口给前端,但是也只开放给指定的前端ip,于是我在后台的配置里面写了ip限定。

实现

  • 后台配置


    Paste_Image.png
  • 前端配置


    Paste_Image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一章 Nginx简介 Nginx是什么 没有听过Nginx?那么一定听过它的“同行”Apache吧!Ngi...
    JokerW阅读 32,863评论 24 1,002
  • 风晴:性格:外向。性别:男。年龄:13。爱好:打棒球、网球和游泳。喜欢的明星:汪峰。 落月:性格:内向。性别:女。...
    叮当0908阅读 2,642评论 2 2
  • 读《给教师的一百条新建议》有感 河南 雷书红 有一本书,真正关心教师的健康幸福,真诚走...
    西外小学部雷书红阅读 4,463评论 0 6
  • 红云飘散,望斜阳暗,雀鸟鸣叹。 残垣陌道独转,才思忆处,茫然中断。 意欲回望,快步竟无奈凌乱。 忆慢慢, 过往红尘...
    落落如晨星阅读 2,548评论 4 9
  • 我们害怕的所谓“中年危机” 其实只是那个日渐 对世界失去野心 对生活失去乐趣 对未来失去想象力和创造力的自己
    morningfz阅读 1,677评论 0 0