尝试使用Vue.js(五)服务器部署,nginx配置

尝试使用Vue.js(五)服务器部署,nginx配置

用‘vue’尝试写了个小Demo,熟悉一下vue的流程,和vue生态圈里的‘vue-router’、‘vuex’等。
Demo的在线预览地址
Demo的github代码地址
这篇文章介绍下载‘vue-cli’开发好后怎么配合nginx部署


分下面一点介绍:

  1. vue打包好后怎么配合nginx部署

如果使用vue浏览器端渲染,:

如果纯浏览器端渲染,不涉及Vue SSR(服务器端渲染),那就天然形成前后端分离了,接口全部异步,这样的的模式,在部署上也习惯前后端各种部署,启一个‘nginx’服务器,nginx对静态文件处理还是比较溜的,所以打包好的vue代码直接用nginx访问,而接口则用nginx代理到后端服务器就OK了,具体步骤如下:。

‘vue-cli的脚手架打包这些都有了,不细说’
环境上nginx安装过程,不细说了
过程:

  1. vue-cli工程,执行‘npm run build’打包工程,得到一个‘dist’文件,所有打包好的代码都在dist文件中了,这就是部署需要的代码。
  2. 配置nginx,如下:

nginx的顶层的几个属性配置暂时不说了,涉及到的主要是server属性的配置,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
server {
listen 80; //nginx坚挺80端口
server_name test.clibchina.com; //网站的域名
location / { //把根目录直接设置到打包好的‘dist’文件下,主入口是index
root / xxx/ xxx / xxx / dist; //这块改成自己dist在的路径,linux系统 输入 pwd可以看到当前路径
index index.html index.htm;
}
//这个是设置缓存策略,把所有的静态文件,设置成在本地永久缓存
location~.*\.(gif | jpg | js | css | jpeg | png | bmp | swf) $ {
root / xxx/ xxx / xxx / dist; //这块改成自己dist在的路径
add_header Cache - Control max - age = 259200000000;
}
//设置接口代理,‘/api’开头的请求接口反向代理到其他服务器
location / api {
rewrite ^ . + api / ? (.*) $ / $1
break;
include uwsgi_params;
proxy_pass http: //japi.juhe.cn;
}
//设置接口代理,‘/op’开头的请求接口反向代理到其他服务器
location / op {
rewrite ^ . + op / ? (.*) $ / $1
break;
include uwsgi_params;
proxy_pass http: //op.juhe.cn;
}
//设置接口代理,‘/happy’开头的请求接口反向代理到其他服务器
location / happy {
rewrite ^ . + happy / ? (.*) $ / $1
break;
include uwsgi_params;
proxy_pass http: //v.juhe.cn;
}
}

主要说下这几点

  1. 配置根目录
  2. 配置缓存策略:因为打包会根据文件内容生成文件指纹(内容不同,文件名也会不同),所以使用用就缓存,只要文件名字没变,就走本地缓存,这样再访问一次之后,只要文件内容没再变,就走本地缓存,以后访问速度会快不少。(博客里有两篇文章,一个是关于前端优化,一个是缓存可以看下)
  3. 后端接口反向代理,这个和本地开发,在vue项目里反向代理是一个意思,可以看vue(二)那个文章看本地开发反向代理配置。现在我们大部分可以用这种模式,后端提供异步接口,前端ajax请求,部署的时候可以分开部署,反向代理后端接口就行了

主要理解下,缓存配置的策略:本地永久缓存配合打包产生文件指纹,是一个比较好的优化点

作者 [@sha Qihe]

2016 年 12月 28日