historyApiFallback non funziona nel server di sviluppo Webpack

Uso il server di sviluppo Webpack e browserHistory in React Router per manipolare gli URL tramite l'API di cronologia HTML5. historyapifallback-option non funziona nel mio file di configurazione del pacchetto web. Dopo rinfrescante http://localhost:8080/users o http://localhost:8080/products ho ottenuto 404.historyApiFallback non funziona nel server di sviluppo Webpack

webpack.config.js

var webpack = require('webpack'); 
var merge = require('webpack-merge'); 

const TARGET = process.env.npm_lifecycle_event; 

var common = { 
    cache: true, 
    debug: true, 
    entry: './src/script/index.jsx', 
    resolve: { 
     extensions: ['', '.js', '.jsx'] 
    }, 
    output: { 
     sourceMapFilename: '[file].map' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js[x]?$/, 
       loader: 'babel-loader', 
       exclude: /(node_modules)/ 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.ProvidePlugin({ 
      $: "jquery", 
      jQuery: "jquery" 
     }) 
    ] 
}; 

if(TARGET === 'dev' || !TARGET) { 
    module.exports = merge(common,{ 
     devtool: 'eval-source-map', 
     devServer: { 
      historyApiFallback: true 
     }, 
     output: { 
      filename: 'index.js', 
      publicPath: 'http://localhost:8090/assets/' 
     }, 
     plugins: [ 
      new webpack.DefinePlugin({ 
       'process.env.NODE_ENV': JSON.stringify('dev') 
      }) 
     ] 
    }); 
}

index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> 
     <title>Test</title> 
    </head> 
    <body> 
     <div id="content"> 
      <!-- this is where the root react component will get rendered --> 
     </div> 
     <script src="http://localhost:8090/webpack-dev-server.js"></script> 
     <script type="text/javascript" src="http://localhost:8090/assets/index.js"></script> 
    </body> 
</html>

index.jsx

import React, {Component} from 'react'; 
import ReactDOM from 'react-dom'; 
import {Router, Route, useRouterHistory, browserHistory, Link} from 'react-router'; 

class Home extends Component{ 
    constructor(props) { 
    super(props); 
    } 

    render() { 
     return <div> 
      I am home component 
      <Link to="/users" activeClassName="active">Users</Link> 
      <Link to="/products" activeClassName="active">Products</Link> 
     </div>; 
    } 
} 

class Users extends Component{ 
    constructor(props) { 
    super(props); 
    } 

    render() { 
     return <div> I am Users component </div>; 
    } 
} 

class Products extends Component{ 
    constructor(props) { 
    super(props); 
    } 

    render() { 
     return <div> I am Products component </div>; 
    } 
} 

ReactDOM.render(
    <Router history={browserHistory} onUpdate={() => window.scrollTo(0, 0)}> 
     <Route path="/" component={Home}/> 
     <Route path="/users" component={Users} type="users"/> 
     <Route path="/products" component={Products} type="products"/> 
    </Router> 
    , document.getElementById('content'));

package.json

{ 
    "name": "test", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.jsx", 
    "scripts": { 
    "start": "npm run serve | npm run dev", 
    "serve": "./node_modules/.bin/http-server -p 8080", 
    "dev": "webpack-dev-server -d --progress --colors --port 8090 --history-api-fallback" 
    }, 
    "author": "", 
    "license": "MIT", 
    "dependencies": { 
    "events": "^1.1.0", 
    "jquery": "^2.2.3", 
    "path": "^0.12.7", 
    "react": "^15.0.2", 
    "react-dom": "^15.0.2", 
    "react-mixin": "^3.0.5", 
    "react-router": "^2.4.0" 
    }, 
    "devDependencies": { 
    "babel": "^6.5.2", 
    "babel-core": "^6.8.0", 
    "babel-loader": "^6.2.4", 
    "babel-polyfill": "^6.8.0", 
    "babel-preset-es2015": "^6.6.0", 
    "babel-preset-react": "^6.5.0", 
    "babel-register": "^6.8.0", 
    "http-server": "^0.9.0", 
    "webpack": "^1.13.0", 
    "webpack-dev-server": "^1.14.1", 
    "webpack-merge": "^0.12.0" 
    } 
}

Ho provato a cambiare devserver nella mia configurazione, ma non ha aiutato:

devServer: { 
    historyApiFallback: { 
     index: 'index.html', 
    } 
}, 

devServer: { 
    historyApiFallback: { 
     index: 'index.js', 
    } 
}, 

devServer: { 
    historyApiFallback: { 
     index: 'http://localhost:8090/assets', 
    } 
}, 

devServer: { 
    historyApiFallback: { 
     index: 'http://localhost:8090/assets/', 
    } 
}, 

devServer: { 
    historyApiFallback: { 
     index: 'http://localhost:8090/assets/index.html', 
    } 
}, 

devServer: { 
    historyApiFallback: { 
     index: 'http://localhost:8090/assets/index.js', 
    } 
}, 

devServer: { 
    historyApiFallback: { 
     index: 'http://localhost:8090/assets/index.js', 
    } 
}, 
output: { 
    filename: 'index.js', 
      publicPath: 'http://localhost:8090/assets/' 
},

fonte

2016-05-17 Matt

mi capita di incontrare la stessa domanda oggi. lasciare config in webpack.config.js: output.publicPath essere uguale a devServer.historyApiFallback.index e indicare il percorso del file html. La mia versione webpack-dev-server è 1.10.1 e funziona bene. http://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option non funziona, è necessario indicare il percorso del file html.

ad esempio

module.exports = { 
    entry: "./src/app/index.js", 
    output: { 
     path: path.resolve(__dirname, 'build'), 
     publicPath: 'build', 
     filename: 'bundle-main.js' 
    }, 
    devServer: { 
     historyApiFallback:{ 
      index:'build/index.html' 
     }, 
    }, 
    //其他的配置省略 
};

historyApiFallback.index indicano che quando sentiero URL non corrisponde un vero e proprio file webpack-dev-server di utilizzare il file di configurazione in historyApiFallback.index di mostrare in browser invece di pagina 404. poi tutte le cose sul tuo cambio di rotta lascia che il tuo js utilizzi react-router per farlo.

fonte

2016-07-05 15:38:52 echizen

Grazie mille! Funziona – Matt

uscita: { \t \t publicPath: '/', \t \t percorso: path.join (__ dirname, 'pubblico'), \t \t filename: '' bundle.js \t}, \t devserver: { \t \t historyApiFallback: vero, \t} Nel mio caso, il mio percorso di output è così e qui historyApi fallback non funziona anche se ho messo historyApiFallback: {index: '/'} –

@BijayRai ho lo stesso config come il tuo. Come hai risolto il problema? – gca

historyApiFallback non funziona nel server di sviluppo Webpack

risposta

Problemi correlati