问题描述

我正在尝试将烧瓶服务器连接到使用 create-react-app 创建的反应应用程序，并使用 webpack 捆绑它。除了我使用默认的 create-react-app 作为起点之外，我主要关注我通过这个项目和随附的视频所学到的东西。

这是我的目录结构

-SimpleApp
--server
----server.py
----__init__.py
--static
----dist
------bundle.js
------styles.css
----node-modules
----src
----package.json
----package-lock.json
----webpack.config.js
----index.html
----__init__.py
--venv

基本上我的“静态”文件夹是默认的 react-app，加上一个 index.html、一个配置文件和一个空的init .py。

我的 server.py 很简单，我在其中设置了我的 static_folder 和 template_folder

服务器.py

from flask import Flask, render_template, jsonify

app = Flask(__name__, static_folder='..static/dist', template_folder='../static')

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run()

它调用我的 index.html 看起来像

索引.html

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <link rel="stylesheet" href="dist/styles.css">
    <title>simple app</title>
   </head>
 <body>
    <div id="root" />
    <div>Hello</div>
    <script src="dist/bundle.js" type="text/javascript"></script>
   </body>
</html>

我的 webpack.config.js 是

webpack.config.js

const webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

const config = {
    entry:  __dirname + '/src/index.js',
    output: {
        path: path.join(__dirname + '/dist'),
        filename: 'bundle.js',
    },
    resolve: {
        extensions: [".js", ".jsx", ".css"]
    },
    module: {
        rules: [
            {
                test: /\.jsx?/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader',
                })
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: 'file-loader'
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('styles.css'),
    ]
};

module.exports = config;

和

包.json

{
  "name": "simpleapp",
  "version": "1.0.0",
  "description": "Fullstack Template",
  "main": "index.js",
  "scripts": {
    "build": "webpack -p --progress --config webpack.config.js",
    "dev-build": "webpack --progress -d --config webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --progress -d --config webpack.config.js --watch"
  },
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.11.2",
    "jquery": "^3.2.1",
    "react": "^15.6.1",
    "react-bootstrap": "^0.31.0",
    "react-dom": "^15.6.1",
    "style-loader": "^0.18.2",
    "webpack": "^3.12.0",
    "webpack-cli": "^3.2.1"
  }
}

我运行 npm run watch 和 python server.py 我得到了

"GET /dist/styles.css HTTP/1.1" 404 -
"GET /dist/bundle.js HTTP/1.1" 404

这似乎可以追溯到 index.html。我不认为我的配置或包文件与它有任何关系，但我是编写这些的新手，不想误解。

未找到的文件在我的应用程序的 static_folder 中，为什么找不到它们？

我可能遗漏了一些基本概念。如果是这样，请指出我正确的方向

提前致谢！

标签： reactjsflaskwebpackhttp-status-code-404

解决方案

app = Flask(__name__, static_folder='..static/dist', template_folder='../static')

以上可能是令人困惑的事情，并且..static与../static

编辑：刚刚看了你链接的教程。我将在下面留下我之前写的答案，但修复上面的错字static_folder='../static/dist 可能会更快地解决您的问题。

就个人而言，我会通过执行以下操作来简化这一点：

请注意，您server.py位于server目录中
在此目录中创建 2 个子目录server：templates和static
将 index.html 移动到server/templates
将所有静态文件，包括dist子目录移动到server/static

现在目录结构应该更像：

SimpleApp
└── server
    ├── __init__.py
    ├── server.py
    ├── static
    │   └── dist
    │       ├── bundle.js
    │       └── styles.css
    └── templates
        └── index.html

然后只需使用以下命令初始化应用程序：

app = Flask(__name__)

无需在此处定义静态和模板目录，因为您已将其放置在 Flask 期望的默认结构中。

尝试http://localhost:5000/static/dist/bundle.js在浏览器中点击：并确认加载正确。

然后更新模板以从正确的位置加载这些文件，url_for在模板中使用：

<link rel="stylesheet"
 href="{{ url_for('static', filename='dist/styles.css') }}"
>

和

<script type="text/javascript"
 src="{{ url_for('static', filename='dist/bundle.js') }}"
>

如果您bundle.js稍后重新生成，您可能还需要调整 webpack 配置以将其放置在新位置。