我的React应用程序在开发环境中完美运行,它在webpack-dev-server上运行,但它不适用于生产(在apache上)。它在控制台或任何地方都没有任何错误。这是我的项目的代码结构。有人可以帮我解决这个问题,过去5个小时我一直坚持这个。
当我运行命令 npm run dist 时,app.js和index.html文件将在dist目录中创建,而我正在复制到apache htdocs目录中的prod环境。现在当我打开我的域时,我看到空白的index.html页面,没有渲染/挂载的反应组件。我可以在浏览器成功获取的网络选项卡app.js中看到。
的package.json
{
"private": true,
"version": "0.0.1",
"description": "YOUR DESCRIPTION - Generated by generator-react-webpack",
"main": "",
"scripts": {
"clean": "rimraf dist/*",
"copy": "copyfiles -f ./src/index.html ./src/favicon.ico ./dist",
"dist": "npm run copy & webpack --env=dist",
"lint": "eslint ./src",
"posttest": "npm run lint",
"release:major": "npm version major && npm publish && git push --follow-tags",
"release:minor": "npm version minor && npm publish && git push --follow-tags",
"release:patch": "npm version patch && npm publish && git push --follow-tags",
"serve": "node server.js --env=dev",
"serve:dist": "node server.js --env=dist",
"start": "sudo node server.js --env=dev",
"test": "karma start",
"test:watch": "karma start --autoWatch=true --singleRun=false"
},
"repository": "",
"keywords": [],
"author": "Your name here",
"devDependencies": {
"babel-core": "^6.0.0",
"babel-eslint": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"babel-preset-stage-0": "^6.5.0",
"bower-webpack-plugin": "^0.1.9",
"chai": "^3.2.0",
"copyfiles": "^1.0.0",
"css-loader": "^0.23.0",
"eslint": "^3.0.0",
"eslint-loader": "^1.0.0",
"eslint-plugin-react": "^6.0.0",
"file-loader": "^0.9.0",
"glob": "^7.0.0",
"isparta-instrumenter-loader": "^1.0.0",
"json-loader": "^0.5.4",
"karma": "^1.0.0",
"karma-chai": "^0.1.0",
"karma-coverage": "^1.0.0",
"karma-mocha": "^1.0.0",
"karma-mocha-reporter": "^2.0.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sourcemap-loader": "^0.3.5",
"karma-webpack": "^1.7.0",
"minimist": "^1.2.0",
"mocha": "^3.0.0",
"node-sass": "^4.0.0",
"null-loader": "^0.1.1",
"open": "0.0.5",
"phantomjs-prebuilt": "^2.0.0",
"react-addons-test-utils": "^15.0.0",
"react-hot-loader": "^1.2.9",
"rimraf": "^2.4.3",
"sass-loader": "^4.1.0",
"style-loader": "^0.13.0",
"url-loader": "^0.5.6",
"webpack": "^1.12.0",
"webpack-dev-server": "^1.12.0"
},
"dependencies": {
"jquery": "^3.1.1",
"react": "^15.0.0",
"react-datepicker": "^0.39.0",
"react-dom": "^15.0.0",
"react-router": "^3.0.0"
}
}
webpack.config.js
const path = require('path');
const args = require('minimist')(process.argv.slice(2));
// List of allowed environments
const allowedEnvs = ['dev', 'dist', 'test'];
// Set the correct environment
let env;
if (args._.length > 0 && args._.indexOf('start') !== -1) {
env = 'test';
} else if (args.env) {
env = args.env;
} else {
env = 'dev';
}
process.env.REACT_WEBPACK_ENV = env;
/**
* Build the webpack configuration
* @param {String} wantedEnv The wanted environment
* @return {Object} Webpack config
*/
function buildConfig(wantedEnv) {
let isValid = wantedEnv && wantedEnv.length > 0 && allowedEnvs.indexOf(wantedEnv) !== -1;
let validEnv = isValid ? wantedEnv : 'dev';
let config = require(path.join(__dirname, 'cfg/' + validEnv));
return config;
}
module.exports = buildConfig(env);
base.js
'use strict';
let path = require('path');
let defaultSettings = require('./defaults');
// Additional npm or bower modules to include in builds
// Add all foreign plugins you may need into this array
// @example:
// let npmBase = path.join(__dirname, '../node_modules');
// let additionalPaths = [ path.join(npmBase, 'react-bootstrap') ];
let additionalPaths = [];
module.exports = {
additionalPaths: additionalPaths,
port: defaultSettings.port,
debug: true,
devtool: 'eval',
output: {
path: path.join(__dirname, '/../dist/assets'),
filename: 'app.js',
publicPath: defaultSettings.publicPath
},
devServer: {
contentBase: './src/',
historyApiFallback: true,
hot: true,
port: defaultSettings.port,
publicPath: defaultSettings.publicPath,
noInfo: false
},
resolve: {
extensions: ['', '.js', '.jsx'],
alias: {
actions: `${defaultSettings.srcPath}/actions/`,
components: `${defaultSettings.srcPath}/components/`,
sources: `${defaultSettings.srcPath}/sources/`,
stores: `${defaultSettings.srcPath}/stores/`,
styles: `${defaultSettings.srcPath}/styles/`,
config: `${defaultSettings.srcPath}/config/` + process.env.REACT_WEBPACK_ENV,
'react/lib/ReactMount': 'react-dom/lib/ReactMount'
}
},
module: {}
};
dist.js
let path = require('path');
let webpack = require('webpack');
let baseConfig = require('./base');
let defaultSettings = require('./defaults');
// Add needed plugins here
let BowerWebpackPlugin = require('bower-webpack-plugin');
let config = Object.assign({}, baseConfig, {
entry: path.join(__dirname, '../src/index'),
cache: false,
devtool: 'sourcemap',
plugins: [
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"'
}),
new BowerWebpackPlugin({
searchResolveModulesDirectories: false
}),
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.NoErrorsPlugin()
],
module: defaultSettings.getDefaultModules()
});
// Add needed loaders to the defaults here
config.module.loaders.push({
test: /\.(js|jsx)$/,
loader: 'babel',
include: [].concat(
config.additionalPaths,
[ path.join(__dirname, '/../src') ]
)
});
module.exports = config;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
import App from './components/Main';
// Render the main component into the dom
ReactDOM.render(
<Router history = { browserHistory }>
<Route path = { '/' } component = { App } />
</Router>
, document.getElementById('app'));
Main.js
import React from 'react';
class AppComponent extends React.Component {
render() {
return (
<div>
Hello World............
</div>
)
}
}
export default AppComponent;
的index.html
<!doctype html>
<html>
<head>
<title>Hi Lala</title>
</head>
<body>
<div id='app'></div>
<script src="/assets/app.js"></script>
</body>
</html>
.babelrc
{
"presets": [
"es2015",
"stage-0",
"react"
]
}
答案 0 :(得分:4)
鉴于您提供了指向您网站的链接的上述评论,您不是在/
根网站托管该网站,而是在/salonathome
。这意味着您需要为history
实例指定basename。
import { createHistory } from 'history'
const history = useRouterHistory(createHistory)({
basename: '/salonathome'
})
render((
<Router history={history}>
<Route ... />
</Router>
), document.getElementById('app'))
答案 1 :(得分:0)
我遇到了类似的问题,我使用了类似于 Paul S 的解决方案。我查看了最近的 React Router 文档。我阅读了 BrowserRouter 组件的“basename”属性。我在 Apache 服务器的子目录中托管生产版本。在进行生产构建时,我需要该属性。
我还在该子目录中使用了一个 .htaccess 文件,该文件如下所示:
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ /index.html [L]