historyApiFallback在Webpack开发服务器中不起作用

我使用Webpack开发服务器和browserHistory in React Router通过HTML5历史API使用urls进行操作。 historyapifallback-option在我的webpack配置文件中不起作用。清爽http://localhost:8080/users或http://localhost:8080/products后，我得到了404historyApiFallback在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" 
    } 
}

我试图改变devServer在我的配置，但它并没有帮助：

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

来源

2016-05-17 Matt

我现在碰到的同样的问题。让配置在webpack.config.js：output.publicPath等于devServer.historyApiFallback.index和指出HTML文件路线。我的webpack-dev-server版本是1.10.1，并且运行良好。 http://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option不起作用，您必须指出html文件路径。

例如

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表明，当URL路径不符合一个真正的文件，的WebPack-DEV-服务器使用historyApiFallback.index文件配置在浏览器中显示，而不是404页。那么所有关于你的路由变更的事情都会让你的js使用react-router做到这一点。

来源

2016-07-05 15:38:52 echizen

非常感谢！它的工作原理 – Matt

输出：{ \t \t publicPath： '/'， \t \t路径：path.join（__目录名称， '公共'）， \t \t文件名： 'bundle.js' \t}， \t devServer：{ \t \t historyApiFallback：真实， \t} 就我而言，我的输出路径是这样的，在这里，如果我放在historyApiFallback historyApi回落甚至不工作：{指数：“/”} –

@BijayRai我的配置是相同的你的。你是如何解决这个问题的？ – gca

historyApiFallback在Webpack开发服务器中不起作用

回答

相关问题