Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/21.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs 在heroku上部署react应用程序时出现网页问题_Reactjs_Heroku_Deployment_Webpack - Fatal编程技术网

Reactjs 在heroku上部署react应用程序时出现网页问题

Reactjs 在heroku上部署react应用程序时出现网页问题,reactjs,heroku,deployment,webpack,Reactjs,Heroku,Deployment,Webpack,我在heroku上部署react应用程序时遇到了一些麻烦 我为Webpack2制作了一个配置生产文件 const webpack = require('webpack'); const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const Cle

我在heroku上部署react应用程序时遇到了一些麻烦

我为Webpack2制作了一个配置生产文件

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const nodeModulesPath = path.resolve(__dirname, 'node_modules');

const extractTextPlugin = new ExtractTextPlugin({
    filename: 'main.[hash].css'
});

const HtmlPlugin = new HtmlWebpackPlugin({
    template: 'src/index.html',
    inject: 'body',
    favicon: 'src/data/resources/img/logo/favicon.ico'
});

const ENVS = {
    'process.env': {
        'NODE_ENV': JSON.stringify('production')
    },
    __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
};
const PATHS = {
    app : path.join( __dirname, 'src'),
    build : path.join( __dirname, 'dist')
};

const config = {
    entry: [
        PATHS.app + "/index.js"
    ],
    output: {
        path: PATHS.build,
        filename: 'bundle.[hash].js',
        publicPath: '/',
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [nodeModulesPath],
                use: ['babel-loader']
            },
            {
                test: /\.(scss|css)$/,
                use: extractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            },
            {
                test: /\.html$/,
                use: [ {
                    loader: 'html-loader',
                    options: {
                        minimize: true,
                        removeComments: true,
                    }
                }],
            },
            {
                test: /\.(jpeg|jpg|gf|png|ico|svg|woff|woff2|eot|ttf)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'img/',
                            publicPath: '/'
                        },
                    }
                ]
            }
        ]
    },
    plugins: [
        extractTextPlugin,
        HtmlPlugin,
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: true,
            minimize: true,
            compress: {
                warnings: false,
            },
        }),
        new webpack.DefinePlugin(ENVS),
        new webpack.NoEmitOnErrorsPlugin(),
        new CleanWebpackPlugin(['dist']),
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery',
            'window.jQuery': 'jquery'
        })
    ],
};

module.exports = config;
当我在我的计算机上运行
npm run build
时,我没有任何错误,我有我的文件夹dist

但是在heroku上推了一下之后,我有以下日志:

构建/tmp/build_646d8d781ce9c274343ec9ce9e11f2b4

webpack-p——配置webpack-production.config.js干净的webpack插件:/tmp/build_646d8d781ce9c27434ec9ce9e11f2b4/dist 已被删除。哈希:2a8fc0ac2f35a1a04faf版本:webpack 2.5.1 时间:26063ms[163]./~/jquery/dist/jquery.js 268kb{0}[builded] [190]./src/index.js 752字节{0}[build][191] ./~/babel polyfill/lib/index.js 833字节{0}[build][192] ./~/babel polyfill/~/core js/fn/regexp/escape.js 107字节{0}[编译] [372]./~/babel polyfill/~/core js/shim.js 7.38 kB{0}[builded][373] ./~/bootstrap/dist/js/bootstrap.js 69.7kb{0}[build][374] ./~/bootstrap/dist/css/bootstrap-theme.css 41字节{0}[build][375] ./~/bootstrap/dist/css/bootstrap.css 41字节{0}[build][376] ./~/fixed-data-table/dist/fixed-data-table.css 41字节{0}[编译] [392]./~/react dom/index.js 59字节{0}[build][469] ./~/react/react.js 56字节{0}[build][470] ./~/registrator runtime/runtime.js 24.4 kB{0}[build][471]多线程 ./src/index.js 28字节{0}[build][472] ./~/css加载器/~/sass-loader/lib/loader.js/~/bootstrap/dist/css/bootstrap-theme.css 23.1 kB[已构建][481]。/~/style-loader/addStyles.js 8.51 kB[已构建] +468未找到./src/index.js模块中的隐藏模块错误:错误:无法解析中的“./app/app” “/tmp/build_646d8d781ce9c274343ec9ce9e11f2b4/src@./src/index.js” 11:11-31@multi./src/index.js子html网页包插件 “index.html”: [0]./~/html网页包插件/lib/loader.js/src/index.html 658字节{0}[builded]子提取文本网页包插件: [0]./~/css-loader/lib/css-base.js 2.26 kB{0}[编译] [1] ./~/css加载器/~/sass-loader/lib/loader.js/~/固定数据表/dist/fixed-data-table.css 6.27 kB{0}[Build]子抽取文本网页包插件: [0]./~/css-loader/lib/css-base.js 2.26 kB{0}[编译] [1] ./~/css加载器/~/sass-loader/lib/loader.js/~/bootstrap/dist/css/bootstrap-theme.css 23.1 kB{0}[Build]子抽取文本网页包插件: [0]./~/bootstrap/dist/font/glyphicons-halflings-regular.eot 57字节{0}[builded] [1] ./~/css-loader/lib/css-base.js 2.26 kB{0}[编译] [2] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.svg 57字节{0}[编译] [3] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf 57字节{0}[编译] [4] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff 58字节{0}[编译] [5] ./~/bootstrap/dist/font/glyphicons-halflings-regular.woff2 59字节{0}[编译] [6] ./~/css加载器/~/sass-loader/lib/loader.js/~/bootstrap/dist/css/bootstrap.css 121 kB{0}[Build]npm错误!Linux 3.13.0-112-通用npm错误!argv “/tmp/build_646d8d781ce9c274343ec9ce9e11f2b4/.heroku/node/bin/node” “/tmp/build_646d8d781ce9c274343ec9ce9e11f2b4/.heroku/node/bin/npm” “运行”“生成”npm错误!节点v6.10.3 npm错误!npm v3.10.10 npm错误! 代码ELIFECYCLE npm ERR!Olamee@0.1.0构建:
webpack-p--config
webpack production.config.js
npm ERR!退出状态2

这是package.json的脚本

  "scripts": {
    "start": "webpack-dev-server --config webpack-dev-server.config.js --hot --progress --colors --history-api-fallback",
    "build": "webpack -p --config webpack-production.config.js",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
它告诉我,我在index.js中加载应用程序组件时遇到了问题! 但我说,在我的电脑里,当然在开发模式下,一切都没问题

我的文件夹结构如下:

src

-app(所有组件、减速器、动作等)
-数据(所有样式表、图像、json文件等)
-index.html
-index.js


谢谢你的帮助

尝试在本地计算机上运行bundle exec rake assets:precompile RAILS\u ENV=production--trace。