Question

我有一个webpack dev服务器，我想从一个文件夹服务器。示例网址为：

本地主机/应用

我在我的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

如果我将所有内容从/更改回服务器，则路由工作正常。我想从一个文件夹服务，并且仍然使用webpack dev服务器进行路由工作，但我不确定这是否可行。

这是我的应用和路线。

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));
}

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

Answer 1

我通过改变来实现它：

historyApiFallback: {
  index: '/app',
}

Webpack Dev Server React子文件夹不起作用

1 个答案: