如下：将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. python xlwings Excel 内容截图

    import xlwings as xw from PIL import ImageGrab def excel_save_img(path, sheet=0, img_name="1&qu ...

  2. VUE实现Studio管理后台（七）：树形结构，文件树，节点树共用一套代码NodeTree

    本次介绍的内容,稍稍复杂了一点,用VUE实现树形结构.目前这个属性结构还没有编辑功能,仅仅是展示.明天再开一篇文章,介绍如何增加编辑功能,标题都想好了.先看今天的展示效果: 构建树必须用到递归,使用s ...

  3. Web前端经典面试试题（二）

    上次由于时间有限只分享了一部分的前端面试题,所以本篇继续分享前端经典面试试题 一. 栈和队列的区别? 栈的插入和删除操作都是在一端进行的,而队列的操作却是在两端进行的. 队列先进先出,栈先进后出. 栈 ...

  4. 使用cookie

    概述 虽说在现代Web开发过程中讨论Cookie有些不合时宜,但是这是开发人员如今可以使用的最古老.最稳定的客户端存储形式.当然,我们并不推荐使用Cookie,只是说它是一种选择. Cookie于19 ...

  5. SuperBenchmarker一个用.NET编写的压测工具

    0x01 前言 在这之前想必大家对ab(http)与abs(https)也有一些了解,我们今天不去看ab和abs,SuperBenchmarker(sb.exe)是一个压测工具,他是一个受Apache ...

  6. docker 升级后启动异常处理

    docker升级后启动时提示如下错误: Unable to create at Docker.Core.Pipe.NamedPipeClient.d__5.MoveNext() --- End of ...

  7. EF多租户实例：如何快速实现和同时支持多个DbContext

    前言 上一篇随笔我们谈到了多租户模式,通过多租户模式的演化的例子.大致归纳和总结了几种模式的表现形式. 并且顺带提到了读写分离. 通过好几次的代码调整,使得这个库更加通用.今天我们聊聊怎么通过该类库快 ...

  8. 15 Spring Data JPA概述

    Spring Data JPA 概述 Spring Data JPA 是 Spring 基于 ORM 框架.JPA 规范的基础上封装的一套JPA应用框架,可使开发者用极简的代码即可实现对数据库的访问和 ...

  9. 《即时消息技术剖析与实战》学习笔记12——IM系统如何提升图片、音视频消息发送、浏览的体验

    IM系统如何提升用户发送.浏览图片和音视频消息的体验呢?一是保证图片.音视频消息发送得又快又稳,二是保证用户浏览播放图片.音视频消息时流畅不卡顿. 一.提升用户发送图片.音视频的体验 1. 多上传接入 ...

  10. CSS--transform相关属性实现2d到3d的具体变化

    先放上一段我写的相关代码(可能有一定冗杂代码,请见谅) <!DOCTYPE html> <html lang="en"> <head>      ...