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