Question

我正在使用MEAN堆栈创建一个项目，并希望使用express来提供我的文件。到目前为止，当我加载页面时只加载了索引文件，但对于其他2个依赖项，我得到如下错误：

GET /assets/styles/css/application.css 404 9.470 ms - 151
Error: ENOENT: no such file or directory, stat '/home/shooshte/Webpages/Curriculum/assets/views/index.html'
    at Error (native)

我尝试使用express.static方法提供我的文件，但它似乎不起作用。我还希望有一个cachall路径，它始终提供我的index.html文件（构建一个角度应用程序，因此angular将处理来自索引的路由）。

我的server.js文件：

// packages
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var morgan = require('morgan');
var path = require('path');

//app configuration
    var port = process.env.PORT || 8080;

    // body parser
    app.use(bodyParser.urlencoded({ extended: true }));
    app.use(bodyParser.json());
    //CORS requests
    app.use(function(req, res, next) {
        res.setHeader('Access-Control-Allow-Origin', '*');
        res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
        res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, content-type, Authorization');
        next();
    });

    //log all requests to console
    app.use(morgan('dev'));

app.use(express.static(__dirname +'/assets'));

//catchall route
app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname + '/assets/views/index.html'));
});

//start the server
app.listen(port);
console.log('Running on: ' + port);

的index.html

<!doctype HTML>
<head>
    <meta charset="utf-8">
    <title>Miha Šušteršič</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="assets/styles/css/application.css">
</head>
<body>
    <script src="../../bower_components/angular/angular.min.js"></script>
</body>

我的文件结构如下：

assets
--scripts
--styles
----css
------application.css
----sass
--views
--index.html
bower_components
node_modules
.gitingnore
bower.json
gulpfile.js
package.json
readme.md
server.js

Answer 1

在快速配置中指定app.use(express.static(__dirname +'/assets'));时，表示express服务器将在assets目录中查找静态文件。现在在你的.html文件中，你应该提到没有 assets 目录的静态文件路径。

因此，将<link rel="stylesheet" href="assets/styles/css/application.css">替换为<link rel="stylesheet" href="styles/css/application.css">应成功获取application.css。

用cachall路线提供静态内容 - 表达

1 个答案: