Express渲染时未从Jade加载CSS

Question

这是快递路线的代码：

var express = require('express')
  bodyParser = require('body-parser'),
  path = require('path'),
var app = new express()
app.use(bodyParser.json())
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'jade')
app.use(express.static())
app.use('/', express.static(path.join(__dirname, '/public')))
app.get('/', function (req, res) {
  res.render('index')
})

这是玉文件：

html
    head
        title
        link(href='./simple-color-picker.css', rel='stylesheet')
    body
        block scripts 
            script(type='text/javascript' src='../public/bundle.js')
        form(method="post",enctype="multipart/form-data",action="/")
            p
                input(type="text",name="title",placeholder="title")
            p
                input(type="file",name="upl")
            p
                input(type="submit")

如果我拖动index.html（从jade文件构建），它在浏览器中运行得很好，但当运行express文件时，我的bundle.js中的CSS和P5.js文件出现了404个错误。我认为我应该将它们作为静态文件提供，但这给了我错误连接拒绝

Answer 1

您有错误的路由配置，这是：

app.use(express.static());
app.use('/', express.static(path.join(__dirname, '/public')));
app.get('/', function (req, res) {
  res.render('index')
});

必须是

app.use(express.static(path.join(__dirname, '/public')));
app.get('/', function (req, res) {
  res.render('index')
});

Answer 2

我假设你把css和js文件放在像这样的公共文件夹中

--公共

---简单彩色打印机.css

---bundle.js

然后

更改

 link(href='./simple-color-picker.css', rel='stylesheet')
 script(type='text/javascript' src='../public/bundle.js')

至

 link(href='/simple-color-picker.css', rel='stylesheet')
 script(type='text/javascript' src='/bundle.js')