Register__ 2024-01-27 21:44 采纳率: 89.5%
浏览 5
已结题

koa-static结合koa-mount 使用时,html无法获取外部css\j文件

1.我用Koa框架的 koa-static 和 koa-mount
2.想实现把page1、page2(写好的html,里面有css,js,文件结构如下图)在GET /page1 和 GET /page2 时显示不同的两个网页,
3.但是当访问page1 时,只有html能加载出来,html 中的link css 无法加载
4.我看了他的请求方式是 GET localhost/css/style.css 而不是 GET localhost/page1/css/style.css ,并且我试了,这种请求就可以请求到文件。
5.在不更改html前端的前提下, 有什么方法可以解决吗?
服务器nodejs如下:

// server.js
const Koa = require('koa');
const Mount = require('koa-mount');
const Static = require('koa-static');

const App = new Koa();

App.use(Mount('/page1', Static('./page1'))); // 暂时先弄page1

App.listen(80);

html 如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <h1>KOA</h1>
</body>
</html>

文件结构:

-run (最外层文件夹):
---./server.js
---./page1
-------./index.html
-------./css
-------------./style.css
-------./js
-------------./main.js
  • 写回答

1条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2024-01-28 08:22
    关注

    【以下回答由 GPT 生成】

    **回答:**
    
    这个问题的根本原因是页面中的<link>标签中的href路径错了,所以CSS无法加载。当使用Mount中间件时,页面中的资源文件路径需要加上Mount的路径前缀,否则无法正确加载。你可以使用以下方法解决这个问题:
    
    1. 在HTML中的<link>标签中添加Mount的路径前缀,修改为`<link rel="stylesheet" href="/page1/css/style.css">`,这样页面加载时会根据所在路径正确加载CSS文件。
    
    2. 修改koa-static和koa-mount的使用方式,将koa-mount用在koa-static之前,这样koa-static会将静态资源文件的根目录指向Mount的路径,这样就不需要手动修改HTML中的资源路径了。代码如下:
    
    ```javascript
    App.use(Mount('/page1', (ctx, next) => {
      return Static('./page1')(Object.assign(ctx, { path: ctx.path.replace(/^\/page1/, '') }), next);
    }));
    

    这样做的前提是确保page1文件夹下的资源文件路径是正确的,比如style.css文件编译后会放在/page1/css目录下。

    希望能帮到你解决这个问题。 ```


    如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 2月6日
  • 修改了问题 1月27日
  • 修改了问题 1月27日
  • 创建了问题 1月27日

悬赏问题

  • ¥15 UCOSⅢ,3.0.3升级为3.0.4后程序编译成功,但是运行后死在统计任务的地方
  • ¥15 python程序长时间运行卡死,付费求解决方案
  • ¥20 VM打开不了ubuntu虚拟机,如何解决?
  • ¥15 java请求一个返回流式数据的接口,如何将流式数据直接返回前端
  • ¥15 为什么连接不了啊,配置都没问题啊
  • ¥15 c语言做一个简单的计算器,大家来看看
  • ¥15 nuxtjs3+ts 报错,急呀!
  • ¥15 matlab矩阵复数本征值排序
  • ¥15 skynet MySQL ProtocolBuffers
  • ¥15 浏览器关闭事件有时没执行怎么回事