在React中处理静态文件（css，js，img）

Question

I have a React app and I'm using a template for this app. 我有一个React应用，并且我正在为此应用使用模板。 This is my react app's folder structure: 这是我的应用程序的文件夹结构：

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

In my server/index.html there are many static files such as css, js and img. 在我的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>

How to handle those files in a React app? 如何在React应用程序中处理这些文件？ Meanwhile in a Node JS app we use this to handle static files: 同时，在Node JS应用程序中，我们使用它来处理静态文件：

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

the static file isn't loaded and not found if i type eg: localhost:3000/assets/js/jquery , the file is not available 如果我键入例如localhost:3000/assets/js/jquery ，则不会加载并找不到静态文件，该文件不可用

and this is my server/index.js file: 这是我的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'));

Thank you. 谢谢。

Answer 1

you can put static files as below. 您可以如下放置静态文件。

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

在React中处理静态文件（css，js，img）

问题描述

1 个解决方案

解决方案1
-1 已采纳 2017-07-17 08:38:24

在React中处理静态文件（css，js，img）

问题描述

1 个解决方案

解决方案1 -1 已采纳 2017-07-17 08:38:24

解决方案1
-1 已采纳 2017-07-17 08:38:24