NodeJS 为什么我的express代码不能呈现css和javascript文件?

x9ybnkn6  于 2023-03-22  发布在  Node.js
关注(0)|答案(3)|浏览(168)

我正在尝试编写一个基本的express服务器代码。然而,在特定路由上提供的HTML文件不会呈现静态文件(css,js和图像文件)。有人能告诉我我的代码有什么问题吗?下面的代码包括路由器功能。仅供参考,代码在Ubuntu上运行。
我已经使用了express.static()函数。但是,它似乎仍然不起作用。

var express = require('express');
var router = express.Router();
var app = express();
app.use(express.static(__dirname+'/stat'));
router.get('/',(req,res)=>{
    res.send("Welcome to the home page");
});

router.get('/show',(req,res)=>{
    res.sendFile(__dirname+'/index.html');
})

router.get('*',(req,res)=>{
    res.send("Error 404");
});

module.exports = router;
mwkjh3gx

mwkjh3gx1#

一种方法是将您想要提供的JavaScript和CSS文件移动到根目录中的公共文件夹中,然后像这样访问它们:

app.use(express.static('public'));

但是,通常使用Node.js路径模块来访问要从中提供这些静态文件的文件夹的相对路径更安全。这应该是:

const path = require('path')
app.use(express.static(path.join(__dirname, 'stat')));

我认为docs会提供更多的帮助。

lh80um4z

lh80um4z2#

我也遇到过同样的问题,这个错误太愚蠢了

const express = require('express');

const path = require('path');

// importing the routes
const adminRoutes = require('./routes/admin');
const shopRoutes = require('./routes/shop');

const app = express();

// rendering static pages using express.static()
app.use(express.static(path.join(__dirname, 'public')));

// rendering our custom route middleware
app.use(adminRoutes);
app.use(shopRoutes);

// adding Page not found middleware
app.use((req, res, next) => {
    res.status(404).sendFile(path.join(__dirname, 'views', 'page-not-found.html'))
    // res.status(404).send('<h1>404....Page Not Found</h1>')
})

app.listen(3000);

//For the above server code, to render static file from the express js I had 
//done the mistake in the link tag of html - instead of 
//<link rel="stylesheet" href="/css/main.css"> this line I had written this....
//<link rel="style-sheet" href="/css/main.css">
k4aesqcs

k4aesqcs3#

第一种方法:您可以通过输入类似http://localhost:8000/static/style.css的URL来链接您的css文件。
1.将CSS文件保持为静态文件,并使用express static函数。
1.然后你就可以将style.css文件链接到你的HTML。

<link rel="stylesheet" href="http://localhost:3000/static/styles.css" />

记得进入自己的港口,我想你的问题会解决的。
第二种方法:
1.发送你的CSS文件以表达的方式与发送你的HTML文件相同。

app.get('/style.css', (req, res) => {
  res.sendFile(path.join(__dirname + "/view/style.css"));
});

1.然后你可以很容易地将CSS文件链接到HTML。

<link rel="stylesheet" href="/style.css">

相关问题