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

一般作为线上服务,都会使用Nginx作为静态服务资源代理,然后ThinkJS官网的nginx默认配置只是普通代理,所以在官方群里就经常有人闻到,前端用ng2或vue怎么配nginx等问题。

所以这里我将对修改后的配置文件分享给大家。

 server {
listen ;
server_name **.com www.***.com;
root /your/server/path/of/www;
set $node_port ; location / {
proxy_http_version 1.1;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_pass http://127.0.0.1:$node_port$request_uri;
proxy_redirect off;
} #静态文件
location ~ /static/ {
etag on;
expires max;
}
#spa app 主目录
location ~ /oneapp {
try_files $uri $uri/ /oneapp/index.html;
}
}

1. 将所有请求代理到ThinkJS服务

2. 优先处理static请求

3. 更优先处理oneapp请求

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

ThinkJS前端搭配vue时的Nginx配置的更多相关文章

  1. 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)

    前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...

  2. 前端搭建Linux云服务器,Nginx配置详解及部署自己项目到服务器上

    目录 搭建Linux云服务器 购买与基本配置 链接linux服务器 目录结构 基本命令 软件安装 Linux 系统启动 启动过程 运行级别 Nginx详解 1.安装 方式一:yum安装 方式二:自定义 ...

  3. 前端lvs访问多台nginx代理服务时出现404错误的处理

    前端lvs访问多台nginx代理服务时出现404错误的处理 环境描述:app --> lvs --> nginx --> server app访问页面购买流量页面(nginx服务器) ...

  4. Vue 应用 nginx 配置 前后端不分离模式

    一.先在官网下载nginx 软件,解压后放在软件盘中如D盘 将nginx 文件夹拖到编译器中,打开conf 文件夹中的 nginx.conf 文件,找到其中的server {} 配置项,默认35 行. ...

  5. VUE项目二级菜单刷新时404 nginx

    原因:vue项目的路径时虚拟路径,并不存在,所以用nginx去请求请求不到,所以vue项目做了两部调整: 1.所有的请求后端接口地址前端写死 2.nginx里把所有的接口转发后端删掉,并添加以下内容 ...

  6. nginx配置 的话注意几点 1.错误时注意看log 2.天威证书的话,有文档按照其文档一步步配置即可;3每句话的结尾注意千万别丢掉分号

    nginx配置 的话注意几点 1.错误时注意看log  2.天威证书的话,有文档按照其文档一步步配置即可:3每句话的结尾注意千万别丢掉分号:4.配置https时 其转发可以转发到http上 pass_ ...

  7. 前端部署: nginx配置

    前提:nginx 已安装 简介:nginx(engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务.Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Ram ...

  8. 前后端分离 vue的nginx配置

    nginx配置vue 有全静态化  与 vue自己的应用端口 两种方式 以下是nginx跳转到vue自己的端口 https://www.jianshu.com/p/b7bd0d352db7 以下是全静 ...

  9. eggjs+vue+nginx配置

    安装node https://github.com/nodesource/distributions#installation-instructions-1 注意使用No root privilege ...

随机推荐

  1. PTA数据结构与算法题目集(中文) 7-40奥运排行榜 (25 分)

    PTA数据结构与算法题目集(中文)  7-40奥运排行榜 (25 分) 7-40 奥运排行榜 (25 分)   每年奥运会各大媒体都会公布一个排行榜,但是细心的读者发现,不同国家的排行榜略有不同.比如 ...

  2. Shell:Day10

    shell脚本:明白一点:shell脚本本身是一个工具 在写shell脚本之前,就要明白:这个功能能到底如何实现? curl 访问文件源代码,查看网站状态: 才能通过shell(bash)所提供的逻辑 ...

  3. Spring(三):bean的自动装配

    Bean的自动装配 自动装配是Spring满足bean依赖的一种方式. Spring会在上下文中自动寻找,并自动给bean装配属性 Spring中三种装配方式 在xml中显式的配置. 在java中显式 ...

  4. kali2016&2019的安装使用

    先解释一下,为什么要说2016&2019哪,这是因为有一些测试靶机环境在2016以上的系统安装不通过,所以有时候会特意找2016的镜像来用. 一.下载镜像 1.下载镜像当然要到官方去下载了: ...

  5. c#声明数组

    声明二维数组时候,出现报错: string[][] dataTable; dataTable = new string[rows][cols]; 无效的秩说明符: 应为","或&q ...

  6. 28.2 api-- System (gc、arraycopy、exit)

    /* * System:包含一些有用的类字段和方法.它不能被实例化 * static void arraycopy(Object src, int srcPos, Object dest, int d ...

  7. Python设计模式(10)-模板模式

    class DbManager: def insert(self): pass def dele(self): pass class DbManager: def insert(self): pass ...

  8. php-fpm 进程数的设定

    近日,服务器出现异常,网站不能正常访问.经排查是php的问题. 在重启php-fpm时,恢复正常.1分钟之后又出现故障.查看php日志文件 /usr/local/php/var/log 后提示 WAR ...

  9. ES6构造函数class 和 ES5构造函数语法

    构造函数就是JavaScript程序定义好的函数,我们直接使用就可以,实际也是一种函数,构造函数专门用于生成定义对象,通过构造函数生成的对象,称为实例化对象 构造函数分为两种,一种是JavaScrip ...

  10. C语言折半查找法练习题冒泡排序

    C语言折半查找法练习题 折半查找法: 折半查找法是效率较高的一种查找方法.假设有已经按照从小到大的顺序排列好的五个整数num[0]~num[4],要查找的数是key,其基本思想是: 设查找数据的范围下 ...