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

问题描述 投票:0回答:1

我正在使用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显示的错误是thisthis

我的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> 

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

javascript reactjs webpack webpack-dev-server
1个回答
0
投票

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

您需要对server.js做类似的事情(如果您使用node);

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

例如使用小胡子作为模板引擎。

© www.soinside.com 2019 - 2024. All rights reserved.