我有以下服务器(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 }
答案 0 :(得分:0)
在我的项目中,我只使用一个文件夹来提供服务。
文件夹结构
<强>的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)解决了问题。