Javascript 设置部署的路由_Javascript_Reactjs_Webpack_React Router

Javascript 设置部署的路由

javascript reactjs webpack

Javascript 设置部署的路由,javascript,reactjs,webpack,react-router,Javascript,Reactjs,Webpack,React Router,我已经使用Webpack创建了我的第一个React应用程序。现在我想让这个应用程序在我的开发环境之外可以访问，但我无法让它工作对于开发，我在本地计算机上运行： “开始”：“node server.js”，这使我的React应用程序可以通过localhost:3000访问。这很有效但现在我想将我的react应用程序部署到具有域的外部服务器上。要创建我的代码包，我点击 “build”：“webpack-p”这将在子文件夹MyProjectFolder/dist/bundle.js中生成一个b

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

对于开发，我在本地计算机上运行：

“开始”：“node server.js”，

这使我的React应用程序可以通过

localhost:3000

访问。这很有效

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

“build”：“webpack-p”

这将在子文件夹

MyProjectFolder/dist/bundle.js

中生成一个bundle文件。之后，我将我的

index.html

复制到

/dist/

，并包含了bundle文件

<!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>

还有我的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线程：基于这一信息，我已删除

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>

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>

从'react Router'导入{Router，Route，IndexRoute，hashHistory}

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

我搜索了解决方案，找到了这个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>

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>

错误消失了。现在我还是犯了这个错误

EventSource的响应有一个不是“文本/事件流”的MIME类型（“text/html”）。正在中止连接。

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

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

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

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

通过这种方式，您可以访问React代码中的

process.env.NODE\u env

，并在方便的时候创建不同的路由。

。谢谢

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