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. 基于Java的数字货币交易系统的架构设计与开发

    前言 无论是股票交易系统,还是数字货币交易系统,都离不开撮合交易引擎,这是交易平台的心脏.同时,一个优秀的架构设计也会让交易平台的运维和持续开发更加容易.本文基于对开源项目的深入研究,总结了数字货币交 ...

  2. JavaScript new 的时候到底发生了什么?

    function Person(name) { this.name = name; } let liLei = new Person('lilei'); console.log(liLiei.name ...

  3. ajax2.0之拖拽上传

    index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  4. 1049 Counting Ones (30分)

    The task is simple: given any positive integer N, you are supposed to count the total number of 1's ...

  5. 1037 Magic Coupon (25分)

    The magic shop in Mars is offering some magic coupons. Each coupon has an integer N printed on it, m ...

  6. PTA数据结构与算法题目集(中文) 7-29

    PTA数据结构与算法题目集(中文)  7-29 7-29 修理牧场 (25 分)   农夫要修理牧场的一段栅栏,他测量了栅栏,发现需要N块木头,每块木头长度为整数L​i​​个长度单位,于是他购买了一条 ...

  7. 下载腾讯视频mp4格式

    import time import subprocess import argparse def command(cmd, timeout=60): ''' :param cmd: 执行命令cmd, ...

  8. ASP.NET Core中的Controller

    ASP.NET CORE出现之前我们实现的Controller,MVC都继承自Controller基类,WebApi的话继承自ApiController.现在ASP.NET CORE把MVC跟WebA ...

  9. GlusterFS 4.1 版本选择和部署

    GlusterFS 4.1 版本选择和部署 目录 GlusterFS 4.1 版本选择和部署 1 前言相关 1.1 glusterfs优势 1.2 版本选择 1.3 volume知识 2 服务部署 2 ...

  10. mysql命令行参数 --- 这些参数不同于 mysqldump 后的 那些参数(下边文章开头有链接) :2种类型的参数 含义是不一样的

    mysql命令行参数  --- 这些参数不同于  mysqldump  后的 那些参数   :2种类型的参数 含义是不一样的 一,mysql命令行参数 Usage: mysql [OPTIONS] [ ...