在 React 中处理静态文件（css、js、img）答案

【问题标题】：Handle static file (css, js, img) in React在 React 中处理静态文件（css、js、img）
【发布时间】：2017-12-21 14:37:56
【问题描述】：

我有一个 React 应用程序，我正在使用这个应用程序的模板。这是我的 react 应用的文件夹结构：

|app
|-client
|---assets
|---component
|-node_modules
|-server
|---index.html
|---index.js

在我的server/index.html里面有很多css、js、img等静态文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="/assets/img/logo-fav.png">
    <title>Loyalty Multipolar</title>
    <link rel="stylesheet" type="text/css" href="/assets/lib/perfect-scrollbar/css/perfect-scrollbar.min.css"/>
    <link rel="stylesheet" type="text/css" href="/assets/lib/material-design-icons/css/material-design-iconic-font.min.css"/>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="/assets/css/style.css" type="text/css"/>

  </head>
  <body>
    <div class="be-wrapper" id="root">

    </div>
  <script src="bundle.js"></script>

  <script src="assets/lib/jquery/jquery.min.js" type="text/javascript"></script>
  <script src="assets/lib/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js" type="text/javascript"></script>
  <script src="assets/lib/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="assets/js/main.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function(){
      Plugins.init();
    });

  </script>
  </body>
</html>

如何在 React 应用程序中处理这些文件？同时在 Node JS 应用程序中，我们使用它来处理静态文件：

app.use('/assets',express.static(__dirname + '/assets'));

如果我键入，则静态文件未加载且未找到，例如： localhost:3000/assets/js/jquery，文件不可用

这是我的server/index.js 文件：

import express from 'express';
import path from 'path';

import webpack from 'webpack';
import webpackMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackConfig from '../webpack.config.dev';

let app = express();
const compiler = webpack(webpackConfig);

app.use(webpackMiddleware(compiler, {
  hot: true,
  publicPath: webpackConfig.output.publicPath,
  noInfo: true,
}));
app.use(webpackHotMiddleware(compiler));

app.use('/assets',express.static(__dirname + '/assets'));


app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname,'../index.html'));
})

app.listen(3000, () => console.log('Running port 3000'));

谢谢。

【问题讨论】：

这里需要处理什么？
在这个例子中，如果我输入例如：localhost:3000/assets/js/jquery，该文件不可用
这与 React 无关，而与您的服务器配置有关。
我确实添加了 app.use('/assets',express.static(__dirname + '/assets'));在我的服务器/index.js
确保__dirname 是您所期望的。

标签： javascript html css reactjs

【解决方案1】：

你可以如下放置静态文件。

https://github.com/johibkhan2/react-sample-app/blob/master/index.html

【讨论】：

我做了但它不起作用，例如我想添加jquery.js插件但它不可用，我的server/index.js文件中是否有任何错误代码
/** 试试这个 * assets 中的任何内容都可以静态访问，而无需 * 这个 express 路由器参与 */ app.use(express.static(path.join(__dirname, 'assets'), {点文件：'忽略'，索引：假}））
它有效，谢谢，我的静态代码有什么不同
似乎斜线造成了问题