不是由expressjs提供的静态文件

时间:2017-08-08 09:29:54

标签: node.js express pug

我有以下服务器(app.js) - 服务器是由另一个完全标准的文件启动的(如果你认为它可能有帮助,我可以添加它):

import * as express from "express";
import * as session from "express-session";
import { join } from "path";
import * as favicon from "serve-favicon";
import * as logger from "morgan";
import * as cookieParser from "cookie-parser";
import { json, urlencoded } from "body-parser";
import * as uid from 'uid-safe';

var RedisStore = require('connect-redis')(session);
var redis = require("redis").createClient();

const app: express.Application = express();
app.disable("x-powered-by");

app.use(logger("dev"));
app.use(cookieParser());
app.use(json({limit: '10mb'}));
app.use(urlencoded({ limit: '10mb', extended: true }));

app.use(favicon(join(__dirname, "/../client/dist/assets/images", "fav.ico")));

app.use('/fonts', express.static(join(__dirname + '/../client/dist/assets/fonts')));
app.use('/images', express.static(join(__dirname + '/../client/dist/assets/images')));
app.use('/stylesheets', express.static(join(__dirname + '/../client/dist/assets/stylesheets')));
app.use('/javascripts', express.static(join(__dirname + '/../client/dist/assets/javascripts')));
app.use('/node_modules', express.static(join(__dirname + '/../client/node_modules')));
app.use('/static', express.static(join(__dirname + '/../client/dist')));


app.use(session(
    {
        secret: mySecret,
        store: new RedisStore({ host: 'localhost', port: 6379, client: redis }),
        cookie: { maxAge: 12 * 3600000 /* hour */ },
        resave: true, saveUninitialized: true,
        genid:(req)=>{
            return req.groupID + ':' + uid.sync(18);
        },
    }
));

app.set('view engine', 'pug');
app.set('views', join(__dirname, '../client/dist'));


app.get("*", (req: Request, res: Response) => {
    res.render('index', {user: req.session.user});
});

在我的客户端,我有以下(pug)索引(index.pug):

doctype html
html
    head
        meta(charset='utf-8')
        meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
        meta(http-equiv='x-ua-compatible', content='ie=edge')

        link(rel='stylesheet', type="text/css", href='/stylesheets/styles.css')
        link(rel='stylesheet', type="text/css", href='/stylesheets/bootstrap-4.alpha6.min.css')

        script(type='application/javascript' src='/javascripts/jquery-3.2.1.min.js')
        script(type='application/javascript' src='/javascripts/bootstrap-4.alpha6.min.js')
    body
        // some content

我的应用程序的结构是:

server
--app.js

client
--dist
----index.pug
----assets
------javascripts
--------jquery-3.2.1.min.js
--------bootstrap-4.alpha6.min.js
------stylesheets
--------styles.css
--------bootstrap-4.alpha6.min.css

我面临的问题是,在正确提供css文件的情况下,我的服务器无法提供静态javascript文件(例如jquery)!

在服务器端,我没有看到任何针对jquery / bootstrap文件的GET请求(当我看到它为css文件时),并且在浏览器上我收到以下错误:GET http://localhost:8001/javascripts/jquery-3.2.1.min.js/ net::ERR_TOO_MANY_REDIRECTS。我尝试过使用其他javascript / css文件,并且我得到了同样的行为 - 如果javascripts不是正确的,那么css是正确的。我不明白我在这里做什么重定向...

我现在在这个问题上挣扎3天了:(所以任何帮助都表示赞赏

更新:

我已将服务器减少到最小并且仍然具有相同的错误:

import * as express from "express";
import { join } from "path";

const app: express.Application = express();

app.use('/stylesheets', express.static(join(__dirname + '/../client/dist/assets/stylesheets')));
app.use('/javascripts', express.static(join(__dirname + '/../client/dist/assets/javascripts')));


app.set('view engine', 'pug');
app.set('views', join(__dirname, '../client/dist'));

app.get("*", (req: Request, res: Response) => {
    res.render('index');
});


export { app }

2 个答案:

答案 0 :(得分:0)

在我的项目中,我只使用一个文件夹来提供服务。

文件夹结构

enter image description here

<强>的index.html

<link rel="stylesheet" href="styles/vendor-831caab4c1.css"><link rel="stylesheet" href="styles/app-372f46a56e.css">

<script src="scripts/vendor-1acdaaa566.js"></script>
<script src="scripts/app-73f1753f0e.js"></script>

server.js (这也必须在/ dist文件夹中。)

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

app.get('/*', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

如果你想在dist文件夹之外使用server.js,你可以使用/ dist路径获取所有文件。

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

app.get('/*', function(req, res){
  res.sendFile(__dirname + '/dist/index.html');
});

<link rel="stylesheet" href="styles/vendor-831caab4c1.css"><link rel="stylesheet" href="dist/styles/app-372f46a56e.css">

答案 1 :(得分:0)

通过清除浏览器的缓存(Chrome)解决了问题。