Question

所以发生了什么事，我有一个带有React Router的reactjs项目。因此，当我尝试按下/dashboard/stream时，它已将index.html从服务器上移开，但css和js却收到301错误，并且未显示任何内容。

快递服务器

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不会加载。

文件夹结构是这个：

server ... client dist css js index.html ...

对我来说，我看不到它是否正在加载index.html文件，如何无法加载与其链接的css和js。

Answer 1

问题是您正在使用静态文件的绝对路径，因为它们以/开头，因此如果url为/dashboard/stream，则它将尝试从{{加载css和js文件1}}。

要解决此问题，请从路径的开头删除/dashboard/dist/...，以获取相对路径。

和

<link href="dist/css/app.min.css" rel="stylesheet">

Answer 2

这可以解决// Start update tableView.beginUpdates for indexPath in indexPaths { tableView.insertRows(at: [indexPath], with: .none) } // end updates tableView.endUpdates的问题，所以考虑到您使用的是前端路由，为什么不使用Angular呢？

在React文件中使用绝对路径：

server.js
在app.use('/public', express.static(path.join(__dirname, '../client/dist')));文件中服务您的前端路由：

server.js

现在，您应该可以访问app.get('*', function(req, res, next) { res.sendFile("../client/index.html", { root: __dirname }); });目录中的所有文件。

f.e：dist

Express服务器未加载js和CSS

2 个答案: