vue项目代码部署发布总结

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

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

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

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

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

location / {
  try_files $uri $uri/ /index.html;
}

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项目的一些知识。