Question

我目前正在使用Webpack＆amp; amp;开发一个React-Redux应用程序。 NPM。

开发时，我运行"start": "node server.js"（来自我的package.json），然后我的应用程序可以在localhost:3000/myApp上访问。

但我想将此应用程序提供给其他用户。我有一个运行apache的linux服务器，我以前的一些jQuery应用程序运行正常。

但是，要捆绑我的React App，我运行"production": "webpack -p"，其输出为/dist/bundle.js。之后，我创建了一个html文件，包括在服务器上放置的bundle.js

<!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">
    <!--<link rel="stylesheet" href="./Urlaubspalner/css/daterangepicker.css" type="text/css">-->
    <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="./bundle.js"></script>
     </body>
    </html>

尝试访问时出现以下错误：

browser.js?26d3:49Warning: [react-router] Location "/test/index.html" did not match any routes

这是定义我的路线的文件

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
  )

我在SO上发现了几个有类似用途的问题，但是当使用webpack-dev-server运行时，它们大多都有问题。正如我在传统的apache服务器上所说的那样，我想要它。

我需要做什么才能在开发环境之外完成这项工作？很抱歉，如果Q是基本的，但这是我的第一个项目使用所有这些新的npm，webpack，节点...等等。

最后我的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
      }]
    }
  }

问候。

Answer 1

根据您当前的反应路由器路径，以下链接可以正常工作： -

/
/ VacationSummary
/ VacationRequest
/ VacationRequestSummary

我无法在您的react-router中找到/test/home.html路由。所以它肯定会引发错误。此外，您最后不需要特定的 .html 链接。

另外，我建议您制作/ Home Index Route而不是Route。

现在你是localhost：3000 / myApp这个工作，因为它不应该因为你的路由器网址中没有myApp。

所以你的主页（或index.html）应该可以从你上面共享的代码中的localhost：3000访问。

部署[react-router]后“没有匹配任何路由”

1 个答案: