Question

我正在使用Reactjs，redux，webpack和webpack服务器来开发网站。

当我刷新某些页面时，网站崩溃了。更具体地说，当我访问http://localhost:8080/article/ Id 时，页面的工作原理很吸引人，但是当我点击刷新时，页面会变成白色，但有错误。

GET http://localhost:8080/article/scripts/vendor.bundle.js?cfd99d78961c5e13afca 404 (Not Found)
Refused to execute script from 'http://localhost:8080/article/scripts/vendor.bundle.js?cfd99d78961c5e13afca' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Chrome显示的错误为this和this。

我的webpack配置页面如下：

//webpack.config.js    

var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var UglifyJsPlugin = require('uglifyjs-webpack-plugin')
var path = require('path')

var isProd = process.env.NODE_ENV === 'production'
var cssDev = ['style-loader', 'css-loader', 'sass-loader']
var cssProd = ExtractTextPlugin.extract({
    use: [{
            loader: 'css-loader',
            options: {
                minimize: 'true'
            }
        },
        {
            loader: 'sass-loader'
        }
    ],
    fallback: 'style-loader',
    publicPath: '/docs'
})
var cssConfig = isProd ? cssProd : cssDev

module.exports = {
    entry: {
        'app': './src/app.js',
        'vendor': './src/vendor.js'
    },
    output: {
        path: path.resolve(__dirname, 'docs'),
        filename: 'scripts/[name].bundle.js'
    },
    module: {
        rules: [{
                test: /\.jsx?/,
                exclude: [/node_modules/, path.resolve(__dirname, './src/lib')],
                use: 'babel-loader',
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[hash].[ext]'
              },
            {
                test: /\.s?css$/,
                use: cssConfig
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: [
                    'file-loader?name=images/[name].[ext]',
                    'image-webpack-loader'
                ]
            },
            {
                test: /\.(xml|json|ico)$/i,
                use: [
                    'file-loader?name=images/[name].[ext]',
                ]
            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'docs'),
        compress: true,
        hot: true,
        stats: 'errors-only',
        open: true,
        disableHostCheck: true,
        historyApiFallback: true, //when refreshing
        inline: true //reloads the entire browser page
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'styles/[name].bundle.css',
            disable: !isProd,
            allChunks: true
        }),
        new HtmlWebpackPlugin({
            title: 'React MovieDB - Powered by The Movie Database',
            minify: {
                collapseWhitespace: true
            },
            hash: true,
            template: './src/index.ejs'
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new UglifyJsPlugin()
    ],
    watch : true
}

然后我用："dev": "webpack-dev-server",

运行该项目。

这就是我的index.ejs的样子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="apple-touch-icon" sizes="180x180" href="<%= require('./icons/apple-touch-icon.png') %>">
    <link rel="icon" type="image/png" sizes="32x32" href="<%= require('./icons/taleed.png') %>">
    <link rel="icon" type="image/png" sizes="16x16" href="<%= require('./icons/taleed.png') %>">
    <link rel="manifest" href="<%= require('./icons/manifest.json') %>">
    <link rel="mask-icon" href="<%= require('./icons/safari-pinned-tab.svg') %>" color="#01d277">
    <script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/2.0.5/wavesurfer.min.js"></script>
    <meta name="theme-color" content="#ffffff">
    <title>
        Archive Search Engine
    </title>
</head>

<body>
    <div class="smoke-screen"></div>
    <div id="root">
    </div>
</body>

</html>

老实说，我无法找出问题的主要根源，因为该项目是基于模板的，并且我无法与模板的制造商联系。

Answer 1

您正在尝试从基本路径中获取捆绑软件，这很好。但是，当您转到应用程序的不同部分时，您需要从/articles/app.bundle...获取捆绑软件。因此，您需要更改索引文件，以从捆绑软件的服务器绝对路径中提取而不是相对路径。

您需要对server.js做这样的事情（如果使用节点）；

app.get('/*', (req, res) => {
    res.send(template({
        css: bundle.css,
        js: bundle.js,
    }));
});

例如关于将胡须用作模板引擎的情况。

刷新页面时，基于react-js的网页崩溃

1 个答案: