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. B. Lost Number【CF交互题 暴力】

    B. Lost Number[CF交互题 暴力] This is an interactive problem. Remember to flush your output while communi ...

  2. 使用 Nginx 实现 301 跳转至 https 的根域名

    基于 SEO 和安全性的考量,需要进行 301 跳转,以下使用 Nginx 作通用处理 实现结果 需要将以下地址都统一跳转到 https 的根域名 https://chanvinxiao.com ht ...

  3. go 闭包函数

    一.什么是闭包函数? 二.匿名函数可以被赋值给变量并作为值使用: package main import "fmt" func main(){ f() } func f(){ fo ...

  4. C语言 文件操作(六)

    一.fseek() int fseek(FILE * stream, long offset, int whence); 1.参数stream 为已打开的文件指针. 2.参数offset 是偏移量,该 ...

  5. javascript 入门 之 bootstrap 第一个程序

    <table data-toggle="table"> <thead> <tr> <th>Item ID</th> &l ...

  6. 第一天总结(while计数器+成绩大小+获取时间+猜拳大小)

    #*_* coding:utf-8 *_*# while 先有一个计数器 input = 0# input = input('输入数字')while input < 5: input= inpu ...

  7. 线程绑定cpu

    #include <stdio.h> #include <pthread.h> #include <sys/sysinfo.h> #include <unis ...

  8. <context:component-scan base-package=""> 与 <context:annotation-config 区别

    <context:component-scan base-package=""> <context:annotation-config (2012-11-16 2 ...

  9. 第一天 简单的python认证登陆代码

    #!/usr/bin/env python3# -*- coding:utf-8 -*-# name:zzyu welcome = '''-----------welcome to home----- ...

  10. AJ学IOS(08)UI之热门_喜马拉雅UI实现-UIScrollView的使用

    AJ分享,必须精品 先看效果 storyBoard用到的控件 代码实现 */ // // NYViewController.m // 05 - 喜马拉雅 // // Created by apple ...