Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/node.js/40.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Node.js nodejsexpresshbs:css MIMETYPE转换为text/html_Node.js_Express - Fatal编程技术网

Node.js nodejsexpresshbs:css MIMETYPE转换为text/html

Node.js nodejsexpresshbs:css MIMETYPE转换为text/html,node.js,express,Node.js,Express,我知道这个问题以前被问过很多次,但我已经尝试了所有的解决方案,我仍然不知道我做错了什么。 My server.js文件: const express = require('express'); const bodyParser = require('body-parser'); const morgan = require('morgan'); const routes = require('./routes.js'); const hbs = require('hbs'); let a


我知道这个问题以前被问过很多次,但我已经尝试了所有的解决方案,我仍然不知道我做错了什么。

My server.js文件:

  const express = require('express');
const bodyParser = require('body-parser');
const morgan = require('morgan');
const routes = require('./routes.js');
const hbs = require('hbs');


let app = express();
const port = process.env.PORT || 3000;

app.use(express.static(__dirname + '/public'));
app.set('view engine', 'hbs');
app.use(bodyParser.json());
app.use(morgan('dev'));

routes(app);

app.listen(port, () => {
    console.log(`Started up at port ${port}`);
});
My routes.js文件:

module.exports = (app) => {

    app.get('/', (req, res) => {
        res.send('Hello World!');
    });

    app.get('/accounts', (req, res) => {        
       res.render('manage_accounts.hbs');
    });
};
manage_accounts.hbs中的我的css链接:

<link rel="stylesheet" type="text/css" href="/public/plugins/font-awesome/css/font-awesome.min.css" />
错误:

Refused to apply style from 'http://localhost:3000/public/plugins/font-awesome/css/font-awesome.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

我在你的文件夹结构中看不到字体很棒的css。您的路径不正确,或者您没有字体的副本。这应该是固定的。 或 您可以使用CDN版本的文件,例如
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css


来源:

所以很明显问题出在路径上。通过谷歌搜索,我找到了解决方案:
我应该使用nodejs内置的path模块来设置我的公用文件夹的路径。因为server.js文件不在根目录中,因此路径会出错。
新的中间件是这样的:

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

我以plugin.js为例说明了我的插件是如何放置在我的文件夹层次结构中的。一个可以是字体awsomeSo,所以在这种情况下,可以肯定的是,路径在某个地方被弄乱了,您可以在浏览器中打开该路径并选中1。如果未提供CSS的内容-定义的路径错误,请检查localhost:3000/public指向哪个目录。此外,还要检查路径中的空间。2.如果提供了CSS的内容,请检查网络请求的内容类型是否正在提供。我有一个类似的问题。在我的例子中,我在
head
元素中加载了两个样式表文件,第一个没有提供(实际上是404),但在Chrome清单中显示为“由于MIME类型而拒绝应用样式”错误。在Firefox中尝试,文件是否真的加载?@Brendan否。它返回404Yah,因此问题可能是Express
static
有时由于某种原因无法同时为多个文件提供服务,即使这些文件位于同一目录中并且可以单独加载-bug?您是否成功地在头部加载了其他样式表,还是只有一个?作为参考,我在OSX上运行Express 4.16.2。“我的路径”的名称中没有空格(有些人将其归因于类似的问题)
const path = require('path');
const publicPath = path.join(__dirname, '../public');
app.use(express.static(publicPath));