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目录下即可