vue项目代码部署发布总结

在一般情况下,vue项目代码部署发布只需将代码打包后直接上传到服务器即可。但在一个比较彻底的前后端分离业务中,这样的操作就行不通了,这篇文章将重点针对这种情况做分析总结。

vue-router的路由模式主要有hash模式和history模式两种,一般线上项目使用history模式,这种模式的用户体验更好。

history模式在刷新浏览器时会向后端服务器发送真实的请求,比如:如果访问vue项目进入首页,在跳转至列表页面时操作刷新页面,浏览器会向url发送get请求,由于vue项目的路由是前端路由,页面将会变为404。如何避免以上情况发生呢?

vue-router的官方给出了多种解决方案,相对于apache和iis解决方案来说,nginx是更方便的解决方案,下面也会主要就nginx的解决方案进行讲解。

为了避免浏览器刷新后向后端服务器发送请求,需要在nginx的配置文件中加上一句如下代码:

try_files的意思:按顺序检查文件是否存在,返回第一个找到的文件。$uri表示文件,$uri/表示文件,先查找$uri这个文件,如果没有就去查找$uri/这个文件夹,如果还没有就返回index.html。

举个例子:当用户请求 http://xxx.com/example 时,这里的 $uri 就是 /example。try_files 会到硬盘里尝试找这个文件。如果存在名为 /$root/example(其中 $root 是网站的根目录)的文件,就直接把这个文件的内容发送给用户。如果目录中没有叫 example 的文件,try_files就会接着在硬盘里尝试查找$uri/,即有没有名为 /$root/example/ 的目录。如果还没有,就会重定向到 http://xxx.com/index.html。这完全满足了我们的需求。

vue项目开发完成后,是打包好了上传到服务器呢,还是在服务上去打包?其实两种方式都可以,但是服务器性能相对更好,打包速度更快,我的策略更倾向放到服务器打包。流程是这样子的,本地vue项目开发完成后,推到git仓库,然后登陆到服务器,在服务器上将vue项目clone下来,进行安装打包。流程图如下:

打包完成的项目目录不在nginx默认指向的html中,需要进行配置。

这里需要配置nginx的root选项,将其指向vue项目中的dist目录。这样每次修改代码后,只需要在服务器上拉取代码,直接打包即可。

具体配置如图:

最后一个问题,前后端分离的话,如果后端接口没有设置cros和jsonp,那么就涉及到了跨域的问题。这时就需要用nginx来配置一个反向代理服务器。配置如下:

当在项目中访问http:// 你的域名/api,nginx就会帮你请求到http://api.botue.com, 这里有个坑,proxy_pass 后面的地址最后一定要加“/”

最后一个问题,在开发环境中如果项目需要跨域访问接口api,如何配置呢,这里需要配置webpack,以vue-cli为例子,配置文件在build目录下的dev-server.js中,修改如下:

其核心内容其实使用到了http-proxy-middleware这个中间件。

以上便是用nginx、git部署发布vue项目的流程和一些细节。后面会继续讲解用apche和node部署发布vue项目的一些知识。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171216G0OMQ700?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券