所以发生的事情是我有一个包含 React 路由器的 ReactJS 项目。因此，当我尝试点击 /dashboard/stream 时，它会从服务器获取 index.html，但随后 css 和 js 会收到 301 错误，并且不会显示任何内容。
express 服务器
const express = require('express');
const {
createServer
} = require('http');
const io = require('socket.io');
const haiku = require('./haiku');
const app = express();
const server = createServer(app);
const userIds = {};
const noop = () => {};
app.use('/*', express.static(`${process.cwd()}/../client`));
/**
* Random ID until the ID is not in use
*/
function randomID(callback) {
const id = haiku();
if (id in userIds) setTimeout(() => haiku(callback), 5);
else callback(id);
}
/**
* Send data to friend
*/
function sendTo(to, done, fail) {
const receiver = userIds[to];
if (receiver) {
const next = typeof done === 'function' ? done : noop;
next(receiver);
} else {
const next = typeof fail === 'function' ? fail : noop;
next();
}
}
/**
* Initialize when a connection is made
* @param {SocketIO.Socket} socket
*/
function initSocket(socket) {
let id;
socket
.on('init', () => {
randomID((_id) => {
id = _id;
userIds[id] = socket;
socket.emit('init', {
id
});
});
})
.on('request', (data) => {
sendTo(data.to, to => to.emit('request', {
from: id
}));
})
.on('call', (data) => {
sendTo(
data.to,
to => to.emit('call', { ...data,
from: id
}),
() => socket.emit('failed')
);
})
.on('end', (data) => {
sendTo(data.to, to => to.emit('end'));
})
.on('disconnect', () => {
delete userIds[id];
console.log(id, 'disconnected');
});
return socket;
}
module.exports.run = (config) => {
server.listen(config.PORT);
console.log(`Server is listening at :${config.PORT}`);
io.listen(server, {
log: true
})
.on('connection', initSocket);
};index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<link href="/dist/css/app.min.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="/dist/js/app.min.js"></script>
</body>
</html>为什么我的index.html加载了，但是js和css却没有加载。
文件夹结构是这样的:
服务器
...
客户
距离
CSS
js
索引.html
...
对我来说，我看不出它是否正在加载该index.html 文件，它如何无法加载链接到它的 css 和 js。
最佳答案
问题是您正在使用静态文件的绝对路径，因为它们以/开头。所以如果网址是 /dashboard/stream然后它会尝试从/dashboard/dist/...加载css和js文件.
要修复此问题，请删除 /从路径开始到具有相对路径。
<link href="dist/css/app.min.css" rel="stylesheet">
和
<script type="text/javascript" src="dist/js/app.min.js"></script>
关于javascript - Express服务器不加载js和css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51728015/