ThinkJS前端搭配vue时的Nginx配置

 

Thinkjs 做为奇舞团开源的nodejs mvc框架之一，引发了不少NodeJS程序员的亲赖。可是其关于静态文件处理部分支持不够完善，主要是体如今SPA单页应用，以前在ThinkJS 2.*版本时写过一个关于处理单页应用静态资源的middleware think-resource-spa,可是这个只是建议在开发调试环境中使用，并非解决方案。

 

通常做为线上服务，都会使用Nginx做为静态服务资源代理，而后ThinkJS官网的nginx默认配置只是普通代理，因此在官方群里就常常有人闻到，前端用ng2或vue怎么配nginx等问题。

 

因此这里我将对修改后的配置文件分享给你们。

 

 

 1 server {
 2     listen 80;
 3     server_name **.com www.***.com;
 4     root /your/server/path/of/www;
 5     set $node_port 9000;
 6     
 7     location / {
 8         proxy_http_version 1.1;
 9         proxy_set_header X-Real-IP $remote_addr;
10         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
11         proxy_set_header Host $http_host;
12         proxy_set_header X-NginX-Proxy true;
13         proxy_set_header Upgrade $http_upgrade;
14         proxy_set_header Connection "upgrade";
15         proxy_pass http://127.0.0.1:$node_port$request_uri;
16         proxy_redirect off;
17     }
18 
19     #静态文件
20     location ~ /static/ {
21         etag         on;
22         expires      max;
23     }
24     #spa app 主目录
25     location ~ /oneapp {
26         try_files $uri $uri/ /oneapp/index.html;
27     }
28 }

 

 

1. 将全部请求代理到ThinkJS服务

2. 优先处理static请求

3. 更优先处理oneapp请求

 

我这里前端是使用vue2，这里前端须要配合修改的地方是：vue 配置base href 为“/oneapp”, 而后打包输出到www目录下便可