nginx 配置 单页面应用的解决方案

server {
    listen 80;
    server_name example.com;
    root /var/www/example.com;

    gzip_static on;

    location / {
      try_files $uri $uri/ /index.html;
    }

    # Attempt to load static files, if not found route to @rootfiles
    location ~ (.+)\.(html|json|txt|js|css|jpg|jpeg|gif|png|svg|ico|eot|otf|woff|woff2|ttf)$ {
      try_files $uri @rootfiles;
    }

    # Check for app route "directories" in the request uri and strip "directories"
    # from request, loading paths relative to root.
    location @rootfiles {
      rewrite ^/(?:foo/bar/baz|foo/bar|foo|tacos)/(.*) /$1 redirect;
    }
}
时间: 2024-10-24 05:43:14

nginx 配置 单页面应用的解决方案的相关文章

nginx配置错误页面

有时候页面会遇到404页面找不到错误,或者是500.502这种服务端错误,这时候我们可能希望自己定制返回页面,不希望看到默认的或者是内部的错误页面,可以通过nginx配置来实现. 1 50x错误对于50x错误,通常不会直接将错误内容显示在页面,而是由前台页面来解析错误内容并展示在前台的某个位置.我们可以自己定义一个json返回对象,由页面来解析这个json对象.以500错误为例,在nginx服务器任意目录下(例如,/usr/share/nginx/html)创建一个500.json文件,内容如下

nginx配置404页面 <备忘>

修改nginx配置文件: fastcgi_intercept_errors    on;        #通过某些方法拦截错误 error_page    404    /404.html;        #自定义错误页面 检查nginx配置文件: nginx -t 重新加载nginx配置文件: nginx -s reload

nginx 配置错误页面

server { ... include 404.conf; ... } vi 404.conf proxy_intercept_errors on;error_page 404 @404;error_page 503 @503;error_page 502 @502;error_page 403 @403;error_page 500 @500;location @404 {root html; rewrite (.*) /error.html break;}location ^~ /wdzj

nginx配置静态页面访问

server { server_name static.naice.me; // 你的域名或者 ip # 域名:static.naice.me 这里用 "_" 代表获取匹配所有 root /www/static-web/static-web; // 你的克隆到的项目路径 index index.html; // 显示首页 location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js|pdf|txt){ root /www/static-web/static

nginx 配置维护页面

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #008f00; background-color: #050d05 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #008f00; background-color: #050d05; min-height: 16.0px } span.s1 { } server { l

webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载

本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载.不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack配置来实现的,而是通过webpack的写法和内置函数实现的. 目前webpack针对此项功能提供 2 种函数: import(): 引入并且自动执行相关 js 代码 require.ensure(): 引入但需要手动执行相关 js 代码 本文将会进行逐一讲解. >>> 本节课源码 >>> 所有课程源码 1. 准备工作 此次代码

vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案

项目背景 vue-cli生成的单页面项目,router使用history模式.产品会在公众号内使用,需要添加微信JSSDK,做分享相关配置. 遇到的问题 相关配置与JS接口安全域名都已经ok,发布后,pc端微信开发者工具与Android手机 内测试分享都没问题,无论怎么跳转再分享也没问题.IOS 手机,首次到页面分享没问题,但是跳转后,就会报invalid signature 签名错误. 就是说 从 [http://aaa.com/index] 跳到 [http://aaa.com/detail

[转帖]nginx配置ssl加密(单/双向认证、部分https)

nginx配置ssl加密(单/双向认证.部分https) https://segmentfault.com/a/1190000002866627 nginx下配置ssl本来是很简单的,无论是去认证中心买SSL安全证书还是自签署证书,但最近公司OA的一个需求,得以有个机会实际折腾一番.一开始采用的是全站加密,所有访问http:80的请求强制转换(rewrite)到https,后来自动化测试结果说响应速度太慢,https比http慢慢30倍,心想怎么可能,鬼知道他们怎么测的.所以就试了一下部分页面h

AngularJS单页面路由配置恩,理解了就很简单啦

利用route实现单页面跳转功能 利用angularJS开发流程 1)配置好angularJS开发环境 2)利用 yo angular projectname创建项目目录 3)删除掉系统自动生成的一些自己工程不需要的页面和脚本 4)修改index.html,在 <!-- Add your site or application content here --> 以上注释下面写自己的样式内容,关键是 <div class="container-fluid" id=&qu