我有一个webpack开发服务器,我想从一个文件夹服务器。例如url是:
localhost/app
我在我的webpack配置:
devServer: {
hot: true,
contentBase: path.resolve(__dirname, "dist"),
port: 3002,
host: "0.0.0.0",
publicPath: "/app",
historyApiFallback: true,
disableHostCheck: true
},
output: {
path: path.join(__dirname, "dist"),
publicPath: "/app/",
filename: "app.[hash].js"
}
这工作正常。我可以加载我的应用程序去localhost/app.但由于我使用的反应我想使用路由器,当我去一个路由下的子文件夹我得到一个错误:
Cannot GET /app/user
如果我将所有内容从/更改回服务器,则路由工作正常。我想从一个文件夹服务,并有路由工作仍然与网页开发服务器,但我不知道这是否是可能的。
这是我的应用程序和路线。
import React from "react";
import { render } from "react-dom";
import { AppContainer } from "react-hot-loader";
import { BrowserRouter } from 'react-router-dom';
import App from "./components/App";
const renderApp = Component => {
render(
<AppContainer>
<BrowserRouter basename="/app">
<App />
</BrowserRouter>
</AppContainer>,
document.getElementById("root")
);
};
renderApp(App);
if (module.hot) {
module.hot.accept(() => renderApp(App));
}
应用程序。js
import React, { Component } from "react";
import { Route } from 'react-router-dom';
import Login from './Login';
export default class App extends Component {
render() {
return (
<div>
<Route exact path="/" component={Login}/>
<Route exact path="/user" component={Login}/>
</div>
);
}
}
我是webpack的新手,已经四处搜索了一些子文件夹,他们都说这就是它应该如何工作的。
有什么想法吗?
谢谢
我通过改变以下方式使其发挥作用:
historyApiFallback: {
index: '/app',
}
我通过改变以下方式使其发挥作用:
historyApiFallback: {
index: '/app',
}