提问者:小点点

Webpack开发服务器反应子文件夹不工作


我有一个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',
}

共1个答案

匿名用户

我通过改变以下方式使其发挥作用:

historyApiFallback: {
  index: '/app',
}