如下:将test.html的页面挂载在服务器上,

const express= require('express')
const fs= require('fs')
let app = express();
// app.use(express.static('node_modules'))
app.use(express.static('node_modules'))
app.listen('4000',()=>{
console.log("http://127.0.0.1:4000")
})
app.get('/',(req,res)=>{
fs.readFile('./test.html','utf-8',(err,data)=>{
console.log(data)
res.end(data)
})
})

test.html如下,页面为一个wangEditor的demo,jq资源在本地引入

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wangEditor demo</title>
</head>
<body>
<div id="editor">
<p></p>
</div>
<button class="getsomething">获取</button>
<!-- 注意, 只需要引用 JS,无需引用任何 CSS !!!-->
<script src="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.js"></script>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
// 或者 var editor = new E( document.getElementById('editor') )
editor.create()
let getsomething = document.querySelector('.getsomething');
getsomething.onclick= function(){
$.get({
url:'http://127.0.0.1:4040/setids'
})
console.log(editor.txt.html())
}
</script>
</body>
</html>

此时已经设置了静态资源托管,但是调用http://127.0.0.1:4000时会报错,错误为找不到jq资源,如下

此时bug的原因为jq的引入问题(test.html中14行代码)

<script src="./node_modules/jquery/dist/jquery.js"></script>由于

解决方法

法一

由于设置了静态资源托管(app.use(express.static('node_modules')))因此在html中调用资源的时候不需要加上./node_modules,即如下引入即可

<script src="./jquery/dist/jquery.js"></script>

法二

或者为其设置一个虚拟路径,在静态资源管理时使用如下代码

app.use('/node_modules',express.static('node_modules'))

ps:若使用aaa为虚拟路径则修改如下

js文件

app.use('/aaa',express.static('node_modules'))

html中引用

<script src="./aaa/jquery/dist/jquery.js"></script>由于

nodejs使用express中静态资源托管(express.static())时遇到的bug的更多相关文章

  1. IDEA中静态资源无法找到的原因

    IDEA中静态资源无法找到, 原因1:同名的文件但是在不同的包里. 原因2:IDEA重启,web清空缓存. 原因3:错误的文件及路径. 原因4:其他原因排除后,可使用绝招重启试试.

  2. IntelliJ IDEA+SpringBoot中静态资源访问路径陷阱:静态资源访问404

    IntelliJ IDEA+SpringBoot中静态资源访问路径陷阱:静态资源访问404 .embody{ padding:10px 10px 10px; margin:0 -20px; borde ...

  3. node——通过express模拟Apache实现静态资源托管

    1.express中处理静态资源的函数 创建一个app.js作为入口文件,创建一个public文件夹作为静态资源文件夹 var app=express();var fn=express.static( ...

  4. Spring Boot中静态资源(JS, 图片)等应该放在什么位置

    Spring Boot的静态资源,比如图片应该放在什么位置呢, 如果你放在传统WEB共的类似地方, 比如webapp或者WEB-INF下,你会得到一张示意文件未找到的破碎图片.那应该放哪里呢? 百度一 ...

  5. wpf中静态资源和动态资源的区别

    静态资源(StaticResource)指的是在程序载入内存时对资源的一次性使用,之后就不再访问这个资源了. 动态资源(DynamicResource)指的是在程序运行过程中然会去访问资源.

  6. springboot 应用中静态资源下载

    一. 场景介绍 Excel模板静态资源在,应用中的static文件夹中,文件名称包含中文; 需求:页面直接访问下载Excel模板. 二.目录结构 三.后台代码 @GetMapping("/d ...

  7. 关于web项目中静态资源加载不了的一些解决思路

    问题的产生: <!--springMVC前端控制器加载--> <servlet> <servlet-name>springmvc</servlet-name& ...

  8. Springboot中静态资源和拦截器处理(踩了坑)

    背景: 在项目中我使用了自定义的Filter 这时候过滤了很多路径,当然对静态资源我是直接放过去的,但是,还是出现了静态资源没办法访问到springboot默认的文件夹中得文件 说下默认映射的文件夹有 ...

  9. java中静态资源处理方法

    方案一:激活Tomcat的defaultServlet来处理静态文件 在 web.xml 中添加: <servlet-mapping> <servlet-name>defaul ...

随机推荐

  1. AVCaptureInput和AVCaptureOutput子类介绍

    AVCaptureInput AVCaptureDeviceInput:用于从AVCaptureDevice对象捕获数据. AVCaptureScreenInput:从macOS屏幕上录制的一种捕获输 ...

  2. Windows GDI 窗口与 Direct3D 屏幕截图

    前言 Windows 上,屏幕截图一般是调用 win32 api 完成的,如果 C# 想实现截图功能,就需要封装相关 api.在 Windows 上,主要图形接口有 GDI 和 DirectX.GDI ...

  3. scroll-view组件bindscroll实例应用:自定义滚动条

    我们知道scroll-view组件作为滑动控件非常好用,而有时候我们想放置一个跟随滚动位置来跟进的滚动条,但又不想用滚动条api该怎么办呢?(当然是自己写一个呗还能怎么办[自黑冷漠脸])嗯,没错.自己 ...

  4. 【MySQL 原理分析】之 Explain & Trace 深入分析全模糊查询走索引的原理

    一.背景 今天,交流群有一位同学提出了一个问题.看下图: 之后,这位同学确实也发了一个全模糊查询走索引的例子: 到这我们可以发现,这两个sql最大的区别是:一个是查询全字段(select *),而一个 ...

  5. 使用java程序jxl操作Excel表格

    在实际开发中企业办公系统都会涉及到一个打印报表的功能,也许你的需求就是把web前端展示的员工信息以Excel表格形式打印出来 ,那么具体怎么操作下面我来实现一下 首先我们使用的是 java的jxl技术 ...

  6. Java easyui 下拉框默认选中第一个

    html代码: <tr> <td> <div style="margin-bottom:5px">计价方式:   <%--下拉框默认选中第 ...

  7. py2.7 批量转换文件为 utf8 编码

    source insight 不支持 utf8 ,但是在 linux 上查看的时候是 utf8 编码,就会显示不正常,所以写了个 python 小脚本,可以批量转换 py2.7 #coding:utf ...

  8. flask 分页数据显示

    填充一些数据在表中 @blue.route('/pages/') def pages(): # 默认进入这个视图函数 第一页并只显示5条数据 page = request.args.get('page ...

  9. JS循环嵌套的执行原理

    [逆战班] 循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构,外循环执行一次,内循环全部执行完,直到外循环执行完毕,整个循环结束. while.do.. while和for循环语句都可以进行嵌 ...

  10. 机器学习——详解经典聚类算法Kmeans

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是机器学习专题的第12篇文章,我们一起来看下Kmeans聚类算法. 在上一篇文章当中我们讨论了KNN算法,KNN算法非常形象,通过距离公 ...