historyApiFallback funktioniert nicht in Webpack-dev-Server

Ich benutze Webpack-Dev-Server und browserHistory in React Router, um mit URLs von HTML5 History API zu manipulieren. historyapifallback-option funktioniert nicht in meiner Webpack-Konfigurationsdatei. Nach der Aktualisierung http://localhost:8080/users oder http://localhost:8080/products bekam ich 404.historyApiFallback funktioniert nicht in Webpack-dev-Server

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" 
    } 
}

Ich versuchte devserver in meine Config zu ändern, aber es half nicht:

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/' 
},

Quelle

2016-05-17 Matt

ich die gleiche Frage heute erfüllen. Lassen Sie die config in webpack.config.js: output.publicPath gleich sein devServer.historyApiFallback.index und zeigen Sie HTML-Datei Route. My Webpack-dev-Server-Version ist 1.10.1 und gut funktionieren. http://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option funktioniert nicht, müssen Sie auf HTML-Datei Route hinweisen.

zum Beispiel

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 zeigen, dass, wenn URL-Pfad keine echte Datei übereinstimmen, webpack-dev-Server die Datei config in historyApiFallback.index verwendet in Browser zu zeigen, anstatt 404-Seite. dann alle Dinge über Ihre Route ändern lassen Sie Ihre js mit react-Router tun es.

Quelle

2016-07-05 15:38:52 echizen

Vielen Dank! Es funktioniert – Matt

Ausgabe: { \t \t publicPath: '/', \t \t Pfad: path.join (__ dirname, 'public'), \t \t Dateiname: 'bundle.js' \t}, \t devserver: { \t \t historyApiFallback: true, \t} In meinem Fall ist mein Ausgang Pfad so und hier historyApi Rückfall nicht funktioniert, selbst wenn ich historyApiFallback gesetzt: {index: ‚/‘} –

@BijayRai ich habe die gleiche Konfiguration wie deine. Wie hast du das Problem gelöst? – gca

historyApiFallback funktioniert nicht in Webpack-dev-Server

Antwort

Verwandte Themen