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目录下即可
转载于:https://www.cnblogs.com/rayjs/p/8056682.html
ThinkJS前端搭配vue时的Nginx配置相关推荐
- vue history模式Nginx配置
当你使用 history 模式时,url就像正常的url,例如 "http://yoursite.com/mapp/subpage",不过这种模式还需要后台配置支持.因为我们的应用 ...
- 部署前端项目 Linux系统的nginx配置
为什么80%的码农都做不了架构师?>>> 一.本地文件上传到服务器 scp -r /c/Develop/manage-system/dist/* username@server ...
- 前端学习 Vue笔记 完整版
1.1 搭建Vue开发环境 项目导入开发版本文件 <script type="text/javascript" src="../js/vue.js"> ...
- 解决 VUE history模式 后端配置 微信支付目录限制5个 等问题
前言 作为小公司的WEB开发组组长, 本身为全栈工程师, 主攻方向为PHP. 最近将项目由MVC模式改为了MVVM, 做为小公司的为了节省成本, 招聘了一个新手前端, 编写VUE 新手的技术,无奈并不 ...
- nginx配置之proxy_pass
proxy模块的内容很多,我们暂时说一下最常用的 proxy_pass这个指令. 当我们遇到跨域问题,而且客户端无法支持 CORS 时,最好的办法就是让服务器来做代理.在前端页面所在的服务器 ngin ...
- 多个 VUE 前端工程部署设置、nginx 代理配置
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. PS:早期 我只有一个 VUE 前端工程:gentle-vue ,加一个 java 后端工程:gen ...
- nginx配置 vue打包后的项目 解决刷新页面404问题|nginx配置多端访问
访问vue页面时,/# 使url看着不美观,使用 H5 history模式可以完美解决这个问题,但需要后端nginx帮助.接下来我们自己配置一下. 使用前端路由,但切换新路由时,想要滚动到页面顶部,或 ...
- 【Web通信】WebSocket详解:WebSocket是什么?如何使用WebSocket?在Vue中封装WebSocket(心跳监测)。nginx配置websocket。
一.WebSocket相关定义 1. WebSocket定义 WebSocket 是一种基于TCP的全双工通信协议,它提供了一种在浏览器和服务器之间建立持久连接来交换数据的方法.数据可以作为" ...
- 前端lvs访问多台nginx代理服务时出现404错误的处理
前端lvs访问多台nginx代理服务时出现404错误的处理 环境描述: app --> lvs --> nginx --> server app访问页面购买流量页面(nginx服务器 ...
最新文章
- 纯html css博客,纯HTML+CSS打造动画
- 爬虫学习笔记(十一)—— Scrapy框架(六):媒体管道
- 【PP生产订单】入门介绍(十)
- 90年代人们使用计算机,上世纪90年代电脑走进普通家庭 你还记得长什么样吗?
- 成功抓取豆瓣读书的所有书籍
- 大力智能台灯与飞利浦台灯 智能调光功能体验
- 【本人秃顶程序员】技巧分享丨spring的RestTemplate的妙用,你知道吗?
- mac中如何从vim文本编辑器退回到命令
- Android开发:4-3、Activity常用其他API接口、屏幕旋转
- mysql测试题汇总_总结:SQL练习【SQL经典练习题】
- 在线重定义生产环境大表分区的惨烈踩雷记录
- mac+免密登陆+linux,mac ssh免密登录Linux
- OAuth2.0_授权服务配置_授权码模式_Spring Security OAuth2.0认证授权---springcloud工作笔记144
- igress+nginx部署
- WebConfig主要节点配置总结
- error: Exited sync due to fetch errors
- 开学数码必买清单推荐,2022年开学季最值得入手的好物
- 推荐算法中CTR和CVR的ESMM模型pytorch实现
- U盘中病毒后文件变为屏幕保护程序恢复方法
- python read_csv chunk_Python chunk读取超大文件