使用 express 提供 public 个静态文件

Question

我正在尝试让我的快递服务我的 public 文件夹中的文件，但我似乎无法在这里工作。我在我的文件路径中尝试了很多变化，但我似乎无法让哈巴狗与节点合作。我至少可以从索引中看到 html，但 css 和音乐文件都不想加载。是的，我已经看过许多与我类似的问题。我仍然无法确定为什么它不起作用。请帮助。

我在开发工具中遇到这些错误拒绝应用来自 'http://localhost:3000/public/music.css' 的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。 GET http://localhost:3000/public/Music/Pink_Floyd/WishYouWereHere/ShineOnYouCrazyDiamond(PartsI-V).mp3 404（未找到）

我的文件结构是这样的：

js

-server.js

public

-Music

--artist

---album

----musicfiles.mp3 

-music.css

观看次数

 -index.pug

我的node.js代码：

var jsmediatags = require('jsmediatags');
var express= require('express');
var app=express();
var pug=require('pug');
const path=require('path')
const fs=require('fs');
const { error } = require('console');
var tagsArray=Array();

const port=3000;
const host='localhost';

app.use('/public', express.static(path.join(__dirname, 'public')))
app.set('views','./views');
app.set('view engine', 'pug');

const server =app.listen(port, host, ()=>{

  console.log("server started at "+host+" port:"+port);

  
});

process.on('SIGTERM', () => {
  server.close(() => {
    console.log('Process terminated')
  })
})


jsmediatags.read("./public/Music/Pink_Floyd/WishYouWereHere/ShineOnYouCrazyDiamond(PartsI-V).mp3", {
  onSuccess: function(tag) {

    
    var tags=tag.tags;
    tagsArray=[tags.artist,tags.track,tags.album,tags.title,tags.picture];
    var artist=tags.artist;
    var album=tags.album;
    var title=tags.title;
    var track=tags.track;
   
      var base64Url=Buffer.from(tags.picture.data).toString("base64");

    // var base64Url=Buffer.from(base64String).toString("base64");
    var artInfo="data:"+tags.picture.format+";base64,"+base64Url;
    
    console.log(`data:${tags.picture.format};base64,`);

    app.get('/', (req, res)=>{

      res.render("index", {
        artist:tags.artist,
        album: tags.album,
        title: tags.title,
        track: tags.track,
        art: artInfo
        
      });
      console.log('done');
    });


  },
  onError: function(error) {
    console.log(':(', error.type, error.info);
  }
});

我的哈巴狗代码：

html(lang="en")
    head
        meta(charset='UTF-8')
        meta(http-equiv='X-UA-Compatible' content='IE=edge')
        meta(name='viewport' content='width=device-width, initial-scale=1.0')
        title Music App
        link(rel='stylesheet' type='text/css' href='/public/music.css')
    body
        img#albumC(src=art alt='album art')
        .playbox
            .play
            .reflect
            .playRef
        .pausebox
            .pause
                .PA.center
                .PB.center
            .reflect
            .pause
                .PAref.center
                .PBref.center
        .stopbox
            .stop
            .reflect
            .stopRef
        h2 Artist: #{artist}
        h2 Album: #{album}
        h2 Song: #{title}
        h2 Track: #{track}
        audio(controls src="/public/Music/Pink_Floyd/WishYouWereHere/ShineOnYouCrazyDiamond(PartsI-V).mp3")

Answer 1

根据您的目录草图，在我看来您的 public 目录是 server.js 所在的 js 目录的兄弟（而不是 sub-directory）。所以，而不是这个：

app.use('/public', express.static(path.join(__dirname, 'public')))

你会像这样先升一级：

app.use('/public', express.static(path.join(__dirname, '../public')))

向上一个目录然后向下到 public 目录。

这将与您拥有的标签相匹配：

 link(rel='stylesheet' type='text/css' href='/public/music.css')

使用 express 提供 public 个静态文件

Using express to serve public static files

css

node.js

express

pug