设置部署路线答案

【问题标题】：Setting Routes for Deployment设置部署路线
【发布时间】：2023-03-21 01:15:02
【问题描述】：

我已经使用 Webpack 创建了我的第一个 React 应用程序。现在我想让这个应用程序在我的开发环境之外可以访问，但我没有让它工作。

为了开发，我在本地计算机上运行：

"start": "node server.js",

这使我的 React 应用程序可以通过 localhost:3000 访问。这很好用。

但现在我想将我的 react 应用程序部署在具有域的外部服务器上。为了创建我的代码包，我点击了

"build": "webpack -p"this 在子文件夹MyProjectFolder/dist/bundle.js 中生成一个捆绑文件。然后我将我的index.html 复制到/dist/ 并包含捆绑文件。

<!DOCTYPE html>
<html>
 <head>
  <title>Urlaub-planer</title>
<!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- Auth0Lock script -->
<script src="//cdn.auth0.com/js/lock-9.0.min.js"></script>
 </head>
 <body>
   <div class="todoapp" id="root"></div>
   <!--<script src="/static/bundle.js"></script>-->
    <script src="bundle.js"></script>
  </body>
  </html>

这些都归档，然后复制到我运行 apache 的外部服务器。服务器上的 web 文件夹与我的 ProjectFolder 同名。然后我尝试通过

访问我的应用程序

`https://myDomain.de/MyProjectFolder/index.html

这告诉我这个错误：

我想，我必须更改我的路由器设置，但我目前不知道如何做到这一点。在我的开发环境中，项目文件夹不包含在 URL 中，当我访问我的应用程序时，这可能是问题的一部分吗？任何人都可以指导我完成这个吗？这个问题对你们中的一些人来说似乎很基础，但这是我第一次使用所有这些新技术，我已经尝试了很多，但仍然出现相同的错误消息。我必须做什么，才能将我的 React 应用程序部署到外部服务器上，运行 apache，使用不同的域。请帮帮我。

这是定义我的路由的文件 (ProjectFolder/index.js)

import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import {Router, Route, IndexRoute, browserHistory} from 'react-router'
import createLogger from 'redux-logger'

 import App from './containers/App'
 import VacationSummary from './containers/vacation/VacationSummary'
 import VacationRequest from './containers/vacation/VacationRequest'
 import VacationRequestSummary from './containers/vacation/VacationRequestSummary'

 import Home from './containers/Home'
 import Demo from './components/Demo'
 import rootReducer from './reducers/reducers'
 import thunkMiddleware from 'redux-thunk'

 var injectTapEventPlugin = require("react-tap-event-plugin");
 injectTapEventPlugin();

 const logger = createLogger();

  let createStoreWithMiddleware = applyMiddleware(thunkMiddleware, logger)  (createStore)

  let store = createStoreWithMiddleware(rootReducer)

  let rootElement = document.getElementById('root')

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
     module.hot.accept('./reducers', () => {
    const nextRootReducer = require('./reducers').default
    store.replaceReducer(nextRootReducer)
    })
  }

  render(
    <Provider store={store}>
      <Router history={browserHistory}>
        <Route path="/" component={App}>
         <Route path="Home" component={Home}/>
         <Route path="VacationSummary" component={VacationSummary}/>
         <Route path="VacationRequest" component={VacationRequest}/>
         <Route path="VacationRequestSummary" component= {VacationRequestSummary}/>
     </Route>
  </Router>
    </Provider>,
    rootElement
  )

最后是我的 package.json

   {
   "name": "Urlaubsplaner",
   "version": "0.0.1",
   "main": "index.js",
   "scripts": {
     "server": "node server/server.js",
      "start": "node server.js",
      "watch": "webpack --watch",
      "production": "webpack -p"
    },
    "author": "Auth0",
     "license": "MIT",
    "dependencies": {
     "classnames": "^2.2.5",
     "css-loader": "^0.23.1",
      "material-ui": "^0.15.2",
     "moment": "^2.13.0",
     "react": "^15.1.0",
     "react-bootstrap-daterangepicker": "^3.1.0",
     "react-dom": "*",
     "react-redux": "*",
     "react-router": "*",
      "react-tabs": "^0.7.0",
      "react-tap-event-plugin": "^1.0.0",
      "react-yearly-calendar": "^1.1.4",
    "redux": "*",
     "redux-form": "^5.2.5",
     "redux-logger": "^2.6.1",
      "redux-thunk": "*",
     "style-loader": "^0.13.1"
    },
   "devDependencies": {
    "babel-core": "^5.6.18",
    "babel-loader": "^5.1.4",
     "babel-plugin-react-transform": "^1.1.0",
    "express": "^4.13.3",
    "webpack": "^1.9.11",
    "webpack-dev-middleware": "^1.2.0",
    "webpack-hot-middleware": "^2.2.0"
    }
  }

还有我的 webpack.config

  var path = require('path')
 var webpack = require('webpack')

 module.exports = {
   devtool: 'cheap-module-eval-source-map',
   entry: [
   'webpack-hot-middleware/client',
    './index'
   ],
   output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
     publicPath: '/static/'
   },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
   ],
   module: {
     loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader" },
      {test: /\.js$/,
      loaders: [ 'babel' ],
      exclude: /node_modules/,
      include: __dirname
      }]
    }
  }

更新：

我已经搜索了解决方案并找到了这个 github 线程：Github 根据此信息，我已删除

history={browserHistory} 来自我的路由器，现在我至少看到了我的应用程序，但我收到了一个新错误，与旧错误类似。

阅读消息后，我已经更新了我的代码

import {Router, Route, IndexRoute, hashHistory} from 'react-router'
<Provider store={store}>
  <Router history={hashHistory}>
     <Route path="/" component={App}>
         <Route path="/Home" component={Home}/>
         <Route path="/VacationSummary" component={VacationSummary}/>
         <Route path="/VacationRequest" component={VacationRequest}/>
         <Route path="/VacationRequestSummary" component={VacationRequestSummary}/>
     </Route>
  </Router>

但我仍然收到上面的错误消息。一个想法？

【问题讨论】：

标签： javascript reactjs webpack react-router

【解决方案1】：

如果您需要不同的环境配置，您可以创建不同的 webpack 配置文件并使用 DefinePlugin 公开全局常量。

如果您已经在系统或容器中设置了环境，您可以编写如下内容：

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})

这样你就可以在你的 React 代码中访问 process.env.NODE_ENV 并在你方便的时候创建不同的路由。

【讨论】：

啊很好的建议。谢谢

【解决方案2】：

我已经搜索了解决方案并找到了这个 github 线程：[Github][2] 根据此信息，我已删除

history={browserHistory} 来自我的路由器，现在我至少看到了我的应用程序，但我收到了一个与旧错误类似的新错误。

阅读消息后，我已经更新了我的代码

import {Router, Route, IndexRoute, hashHistory} from 'react-router'
<Provider store={store}>
  <Router history={hashHistory}>
     <Route path="/" component={App}>
         <Route path="/Home" component={Home}/>
         <Route path="/VacationSummary" component={VacationSummary}/>
         <Route path="/VacationRequest" component={VacationRequest}/>
         <Route path="/VacationRequestSummary" component={VacationRequestSummary}/>
     </Route>
  </Router>

但是还是有上面提到的错误（更新Q）。在我排除之后

 if (module.hot) {
  // Enable Webpack hot module replacement for reducers
  module.hot.accept('./reducers', () => {
  const nextRootReducer = require('./reducers').default
  store.replaceReducer(nextRootReducer)
 })
}

错误消失了。现在我仍然收到此错误

EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.

但我认为这与问题中描述的问题无关

【讨论】：