Question

我创建了简单的 express.js 服务器服务器配置：

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);
const SERVER_PORT = 3000;

if (process.env.NODE_ENV === "development") {
    app.use(
        webpackDevMiddleware(compiler, {
            publicPath: config.output.publicPath,
        })
    );

    app.use(webpackHotMiddleware(compiler));
}

app.use(express.static("build"));

app.get("/", (req, res) => {
    res.sendFile(__dirname + '/build/index.html', { root: __dirname })
});

app.listen(SERVER_PORT, (error) => {
    if (error) {
        console.error(error)
    } else {
        console.info("==> ?  Listening on port %s. Open up http://localhost:%s/ in your browser.", SERVER_PORT, SERVER_PORT)
    }
});

我使用 webpack 构建项目。这是 webpack 配置：

const BUILD_DIR = path.resolve(__dirname, './build');
const ASSETS_PATH = path.resolve(__dirname, './src/js');
const STATIC_PATH = path.resolve(__dirname, './public')


var webpack_config = {
    mode: ( process.env.NODE_ENV === "production"  ) ? "production" : "development",

    context: __dirname,

    entry: {
        main: [
            "react",
            "react-dom",
            "react-router"
        ],
        react_app: [
            path.join(ASSETS_PATH, "/index.tsx"),
            "webpack-hot-middleware/client?path=/__webpack_hmr&reload=true"
        ]
    },

    output: {
        path: BUILD_DIR,
        filename: 'js/[name].min.js',
        publicPath: '/build',
        hotUpdateChunkFilename: '.hot/hot-update.js',
        hotUpdateMainFilename: '.hot/hot-update.json',
    },

    resolve: {
        extensions: [' ', '.web.js', '.ts', '.tsx', '.js', '.jsx', 'css'],
    },

    devtool: ("production" === process.env.NODE_ENV) ? "source-map" : "eval-source-map",

    module: {
        rules: [
            {
                test: /\.(jsx|js)$/,
                use: ['babel-loader?compact=true&comments=true&minified=true', 'eslint-loader'],
                exclude: /node_modules/
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: '/node_modules/'
            },
            {
                test: /\.(ttf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: '/css/fonts/'
                    }
                }
            },
            {
                test: /\.(eot|svg|png|jpg|gif|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: '/css/media/'
                    }
                }
            },
            {
                test: /\.jpe?g$|\.ico$|\.gif$|\.png$/,
                exclude: /node_modules/,
                use: {
                    loader: 'file-loader',
                    options: {
                        limit: 1024 * 10,
                        name: '[name].[ext]',
                        outputPath: 'images/'
                    }
                }
            },
            {
                test: /\.json$/,
                loader: "json-loader"
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                        }
                    }
                    , 'css-loader'],
            },
        ]
    },

    plugins: [
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV)
            }
        }),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            title: ' Appointment-APP | Stefanini EMEA ',
            template: './public/index.html',
            filename: path.join(BUILD_DIR, '/index.html'),
            chunks: ['main', 'react_app']
        }),
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: path.join(STATIC_PATH, '/images'),
                    to: path.join(BUILD_DIR, '/images'),
                    toType: 'dir'
                },
            ]
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
            chunkFilename: '[id].css',
        }),
    ],
};

这里我有 2 个 mods-生产和删除。在删除模式下它工作得很好，但是当我启动服务器并尝试输入 http://localhost:3000/ 时，我收到如下错误：

Refused to apply style from 'http://localhost:3000/build/css/react_app.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

localhost/:9 GET http://localhost:3000/build/js/main.min.js net::ERR_ABORTED 404 (Not Found)

所以，我指定了静态文件夹路径 - app.use(express.static("build"));，但没有结果。看来，那个快递在“buid”文件夹中找不到文件

Answer 1

你必须像这样编码

app.use('/', express.static(path.join(__dirname, 'build')))

然后检查。

Answer 2

这可能对某人有用。为了解决这个问题，我使用了 express documentation 和 Jay Suchak 变体。代码

app.use('/build', express.static(path.join(__dirname, 'build')));

为我工作

为什么 express.js 找不到静态文件？

2 个答案: