使用 Express 实现一个简单的 SPA 静态资源服务器
背景
限制 SPA 应用已经成为主流,在项目开发阶段产品经理和后端开发同学经常要查看前端页面,下面就是我们团队常用的使用 express 搭建的 SPA 静态资源服务器方案。
为 SPA 应用添加入口(index.html)的 sendFile
当 SPA 应用开启 html5 mode 的情况下,指定 url 下(<base href="/">
的情况为/
)的全部请求都会访问入口文件(一般情况下是 index.html),然后 SPA 应用会根据 url 再去决定访问的实际页面。
所以我们需要为全部路径添加 sendFile 来发送 index.html 文件内的内容,并将其缓存实际设为0,代码如下:
1 |
app.use("/**", function (req, res) { |
为 SPA 应用添加其他静态资源
由于 Express 中间件的特性,在 index.html 的 sendFile 之前我们需要将其他静态资源进行处理,具体代码如下:
1 |
const options = process.env.env == 'prod' ? {maxAge: '3d'} : {maxAge: '1m'}; |
SPA 静态资源服务器的全部代码
下面是 SPA 静态资源服务器 app.js 的全部代码:
1 |
const express = require('express'); |
执行以下命令即可指定 SPA 项目路径和端口号启动服务器了
1 |
export static=www&&export port=8101 && export env=prod && node ./app.js |
使用 Express 实现一个简单的 SPA 静态资源服务器的更多相关文章
- 极简 Node.js 入门 - 5.3 静态资源服务器
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- 使用Laravel 和 Vue 构建一个简单的SPA
本教程是作者自己在学习Laravel和Vue时的一些总结,有问题欢迎指正. Laravel是PHP的一个框架,Vue是前端页面的框架,这两个框架如何结合起来构建一个SPA(Single Page Ap ...
- 初始nginx(启动运行) 使用nginx做一个简单的静态资源服务器
第一次接触nginx的时候,那时候公司还是用的一些不知名的小技术,后来公司发展问题,重新招了人,然后接触到nginx,公司 使用nginx用来做代理服务器,所有请求 都先经过nginx服务器,然后交由 ...
- 原生node写一个静态资源服务器
myanywhere 用原生node做一个简易阉割版的anywhere静态资源服务器,以提升对node与http的理解. 相关知识 es6及es7语法 http的相关网络知识 响应头 缓存相关 压缩相 ...
- 使用Node.js搭建静态资源服务器
对于Node.js新手,搭建一个静态资源服务器是个不错的锻炼,从最简单的返回文件或错误开始,渐进增强,还可以逐步加深对http的理解.那就开始吧,让我们的双手沾满网络请求! Note: 当然在项目中如 ...
- Nginx——静态资源服务器(一)
java web的项目中,我们经常将项目部署到Tomcat或者jetty上,可以通过Tomcat或者jetty启动的服务来访问静态资源.但是随着Nginx的普及,用Nginx来作为静态资源服务器,似乎 ...
- 【原创】分布式之缓存击穿 【原创】自己动手实现静态资源服务器 【原创】自己动手实现JDK动态代理
[原创]分布式之缓存击穿 什么是缓存击穿 在谈论缓存击穿之前,我们先来回忆下从缓存中加载数据的逻辑,如下图所示 因此,如果黑客每次故意查询一个在缓存内必然不存在的数据,导致每次请求都要去存储层去查 ...
- NodeJS4-8静态资源服务器实战_构建cli工具
Cli(command-line interface),中文是 命令行界面,简单来说就是可以通过命令行快速生成自己的项目模板等功能(比较熟悉的是vue-cli脚手架这些),把上述写的包做成Cli工具. ...
- node静态资源服务器的搭建----访问本地文件夹(搭建可访问静态文件的服务器)
我们的目标是实现一个可访问静态文件的服务器,即可以在浏览器访问文件夹和文件,通过点击来查看文件. 1.先创建一个文件夹anydoor,然后在该文件夹里npm init一个package.json文件, ...
随机推荐
- mysql更新子查询中的内容
UPDATE t_finance_certify_copy c SET c.biz_type=2,c.sub_biz_type=18WHERE c.finance_certify_id IN(SELE ...
- 为什么iterator,foreach遍历时不能进行remove操作?除了一种情况可以这样(特殊情况)?
Exception in thread "main" java.util.ConcurrentModificationException 并发修改异常引发的思考! 1 foreac ...
- cordova linux 安装并编出第一个demo-android
cordova可以做到一次编写到处运行各个平台(android.ios.wp.bb.firefoxos.web等几乎所有平台) 手上只有一个android手机 ,安装的时候没有那么顺利,第一大问题就是 ...
- 20145303刘俊谦 《Java程序设计》实验四 实验报告
实验要求 完成实验.撰写实验报告,实验报告以博客方式发表在博客园,注意实验报告重点是运行结果,遇到的问题(工具查找,安装,使用,程序的编辑,调试,运行等).解决办法(空洞的方法如"查网络&q ...
- 20145211 《网络渗透》MS08_067安全漏洞
20145211 <网络渗透>MS08_067安全漏洞 一.实验原理 ms08_067是服务器服务中一个秘密报告的漏洞,于2008年被发现.攻击者利用靶机默认开放的SMB服务的445端口, ...
- Css常用属性单位
长度单位:px-像素 颜色单位: ①十六进制:#FFFFFF: ②颜色名称:red: ③RGB颜色代码:RGB(0-255,0-255,0-255): ...
- poj3977 - subset - the second time - 暴力 + 二分
2017-08-26 11:38:42 writer:pprp 已经是第二次写这个题了,但是还是出了很多毛病 先给出AC代码: 解题思路: 之前在培训的时候只是笼统的讲了讲怎么做,进行二分对其中一边进 ...
- appium 处理滑动的方法
appium 处理滑动的方法是 swipe(int start-x, int start-y, int end-x, int end-y, int during) - Method in class ...
- Python基础笔记系列十四:python无缝调用c程序
本系列教程供个人学习笔记使用,如果您要浏览可能需要其它编程语言基础(如C语言),why?因为我写得烂啊,只有我自己看得懂!! python语言可以对c程序代码进行调用,以弥补python语言低性能的缺 ...
- 简单的使用hibernate插入数据的例子
数据库创建脚本: drop table person create table person( id varchar(32) not null primary key ...