javascript - Vissa Expressjs-statiska filer serveras medan andra inte gör det

Jag har en konstig situation, det som är särskilt besvärligt är att jag har gjort detta många gånger tidigare, det måste vara något enkelt jag missar.

Snälla hjälp, jag känner att jag håller på att tappa förståndet...

Problem/Symtom

  1. Jag kan ladda alla js-filer från lib-mapparna
  2. Jag kan ladda vilken som helst av png-filerna i mappen root/public/art under weblokationen //art/foo/bar.png
  3. Kan inte ladda något från CSS eller js oavsett vad jag gör, allt ger mig 404-fel, detta gör mig helt galen.
  4. Samma beteende med rad 13 utkommenterad
  5. Samma med olika former av raderna 14-16
  6. Samma med och utan att använda router

Mappstruktur

  • Rot

    • server.ts
    • offentlig

    • konst

      • konst i undermappar

    • css

      • canvas.css

    • js

      • js-filer i mappar och inte

Kod

import * as express from "express";
import * as path from "path";
//const express = require("express")
//const path = require("path")

let app = express()
let port = 3000
let router = express.Router();

router.use('/lib/framework', express.static( path.join(__dirname, 'node_modules','framework')));
router.use('/lib/redactedLib2', express.static(path.join(__dirname, 'node_modules', 'redactedLib2')));
router.use('/lib/redactedLib3', express.static(path.join(__dirname, 'node_modules', 'redactedLib3')));
router.get('/', (req, res) => res.sendFile(path.join(__dirname, 'index.html')))
//app.use('/art/*', express.static(path.join(__dirname, 'public', 'art')));
//app.use('/css/*', express.static(path.join(__dirname, 'public', 'css')));
//app.use('/js/*', express.static(path.join(__dirname, 'public', 'js')));

router.use('/', express.static('public'))

app.use('/', router)

app.listen(port, () => console.log(`Go to http://localhost:${port} to view.`))

Lösning (Redigera)

Om någon hittar detta senare så höll jag på att fixa det hela tiden, jag behövde bara göra en tom cache och ladda om... Om du är i Chrome, öppna utvecklarverktyg med F12, klicka och håll på uppdatera och välj det.

Svar #1

Jag ser två problem, baserat på vad du visar här. Det första är din mappstruktur. Är det korrekt i förhållande till hur din struktur faktiskt ser ut? För i din applikation säger du åt Node att översätta /art/* till /public/art/-mappen, men den mappen finns faktiskt på /art.

För det andra är det formateringen av ditt virtuella sökvägsprefix. Släpp /*; det finns inget behov av att ange ett jokerteckenvärde. Det kommer bara att förstöra sökvägarna. Den avslutande/är också onödig, även om det inte borde orsaka något problem. Hur som helst, omstrukturera dina rutter till:

router.use('/lib/framework', express.static( path.join(__dirname, 'node_modules','framework')));
router.use('/lib/redactedLib2', express.static(path.join(__dirname, 'node_modules', 'redactedLib2')));
router.use('/lib/redactedLib3', express.static(path.join(__dirname, 'node_modules', 'redactedLib3')));
app.use('/art', express.static(path.join(__dirname, 'public', 'art')));
app.use('/css', express.static(path.join(__dirname, 'public', 'css')));
app.use('/js', express.static(path.join(__dirname, 'public', 'js')));
router.get('/', (req, res) => res.sendFile(path.join(__dirname, 'index.html')));

Och antingen att fixa sökvägssammansättningarna i appen, eller att fixa den fysiska filstrukturen, kommer att lösa problemet med att ladda resurser som faktiskt inte existerar.