Question

我正在为公司开发一个简单的应聘应用程序（因此我不能发布太多代码），并且一直在使用webpack-dev-server进行热交换以使开发更快。当出于开发目的而在webpack-dev-server上运行我的应用程序时，我可以在路由中正常使用整个应用程序。当我尝试在localhost：8080上运行相同的应用程序时，我可以看到基本的登录屏幕，然后可以看到主页，但是在那之后，所有路由均不起作用，并且始终显示“无法获取/ home”等。这是一种新行为。

我发现的每个堆栈溢出问题都在解决完全相反的问题，其中webpack-dev-server并未显示localhost的所有内容，而我发现并尝试过的任何东西都没有起作用。

我已经尝试过重新生成bundle.js，以确保所有更改都被选中，并且我已经遍历了webpack.config.js，以确保在那里没有任何更改（除了我添加的其他内容以支持热交换）我几周前所做的）。 Chrome Inspector没有显示任何错误，所以我真的对为什么该应用程序在localhost而不是在webpack-dev-server上损坏的原因感到茫然。

最后，我只想让我的react应用在localhost上看起来像在dev服务器上一样，对于我的生活，我不知道为什么不这样做。

webpack.config.js：

module.exports = {
    entry: [
        './src/index.js'
    ],
    output: {
        path: __dirname+'/public',
        publicPath: '/',
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets: ['react', 'es2015', 'stage-1']
            }
        },{
            test: /\.(s*)css$/,
            loader: combineLoaders([
                {
                    loader: 'style-loader'
                }, {
                    loader: 'css-loader',
                    query: {
                        modules: true,
                        localIdentName: '[name]__[local]___[hash:base64:5]'
                    }
                }, {
                    loader: 'sass-loader'
                },
            ])
        },
        ],
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    devServer: {
        historyApiFallback: true,
        contentBase: './'
    },
    watch: true,
    watchOptions: {
        aggregateTimeout:300,
        poll: 1000,
        ignored: /node_modules/
    }
};

Answer 1

发现我的问题-它存在于server.js中。该问题的最佳答案有助于：What's the correct way to serve production react bundle.js built by webpack?

需要替换：

app.get(['/', '/bom', '/items', '/products', '/segmentation'], function (req, res) {
    res.sendFile('index.html', {root: __dirname});
});

具有：

app.get('*',function(req,res) {
    res.sendFile(path.resolve(__dirname,'public/index.html'));
});

这解决了我的本地主机渲染问题。

Webpack-dev-server显示具有正确路由的完整应用程序，但路由在localhost上不起作用

1 个答案: