Express服务器未加载js和CSS
[英]Express server not loading js and css
问题描述
So whats happening is I have a reactjs project that has react router. 
所以发生的事情是我有一个带有React路由器的reactjs项目。 So when I try and hit /dashboard/stream it's getting the index.html off the server but then the css and js are getting 301 errors and it's not displaying anything. 因此，当我尝试打/dashboard/stream它已将index.html从服务器上移开，但是css和js却收到301错误，并且未显示任何内容。
express server 快递服务器
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 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>
how come my index.html is loaded but then the js and css isnt. 为什么我的index.html被加载，但是js和css不是。
folder structure is this: 文件夹结构是这样的：
server ... client dist css js index.html ...
To me I can't see if it's loading that index.html file how it can't load the css and js that are linked to it. 对我来说，我看不到它是否正在加载该index.html文件，它如何无法加载与其链接的css和js。
2 个解决方案
解决方案1
2 已采纳 2018-08-07 14:02:16
The problem is that you are using absolute path for the static files because they start with a / so if the url is /dashboard/stream then it will tries to load the css and js file from /dashboard/dist/... . 问题是您正在使用静态文件的绝对路径，因为它们以/开头，因此如果url是/dashboard/stream则它将尝试从/dashboard/dist/...加载css和js文件。
To fix it remove the / from the beginning of the path to have a relative path. 要解决此问题，请从路径的开头删除/以获得相对路径。
<link href="dist/css/app.min.css" rel="stylesheet">
and 和
<script type="text/javascript" src="dist/js/app.min.js"></script>
解决方案2
0 2018-08-07 14:33:01
This does the trick with Angular so why not with React considering that you are using front-end routing: 这可以解决Angular所以考虑到您使用的是前端路由，为什么不使用React呢：
Use an absolute path in your
server.jsfile:在server.js文件中使用绝对路径：app.use('/public', express.static(path.join(__dirname, '../client/dist')));Serve your front-end routes in your
server.jsfile:在server.js文件中服务您的前端路由：app.get('*', function(req, res, next) { res.sendFile("../client/index.html", { root: __dirname }); });
Now you should be able to access all the files inside the dist directory. 现在您应该能够访问dist目录中的所有文件。
fe: <script type="text/javascript" src="./public/js/app.min.js"></script> fe： <script type="text/javascript" src="./public/js/app.min.js"></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.