时间戳

首页 > 解决方案 > 快递服务器配置问题，公共目录

javascript - 快递服务器配置问题，公共目录

问题描述

我创建了两个单独的捆绑包，一个用于我的服务器，一个用于我的客户端。但是，当有人访问根路由时，浏览器仍然没有下载客户端包。

我告诉 Express 将该public/文件夹视为可免费使用的公共目录，位于index.js：

app.use(express.static('public'));
app.get('/', (req, res) => {
  const content = renderToString(<Home />);

我还添加了一个带有 ES6 模板字符串的 HTML 片段，如下所示：

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import Home from './client/components/Home';

const app = express();

app.use(express.static('public'));
app.get('/', (req, res) => {
  const content = renderToString(<Home />);

  const html = `<html><head><body><div>${content}</div><script src="bundle.js"></script></body></head></html>`;

  res.send(content);
});

这个想法是当用户从这个端点获得响应时，他们将看到来自<Home />组件的内容，但也会告诉用户浏览器返回我的服务器并下载bundle.js文件。

期望我刷新页面并立即检索 localhost 并请求文件并查看我在组件bundle.js中添加的控制台日志：Home.js

import React from 'react';

const Home = () => {
  return (
    <div>
      <div>I am an OK home component</div>
      <button onClick={() => console.log('Howdy!')}>Press me!</button>
    </div>
  );
};

export default Home;

我刷新了浏览器，没有看到控制台日志，也没有bundle.js在“网络”选项卡中看到文件。

这里给出了什么？

标签： javascriptreactjsexpress

解决方案

所以我创建了一个变量html，我在其中存储了模板字符串中的 HTML，其中包含 bundle.js 文件，但是我没有在任何地方使用该变量。

我不得不替换res.send(content);为res.send(html);.

推荐阅读