首页 文章

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

提问于
浏览
0

我有一个 webpack dev 服务器,我想从一个文件夹服务器。示例网址将是:

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

如果我从/然后路由工作将所有内容更改回服务器。我想从一个文件夹提供服务,并且仍然使用 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',
}

1 回答

  • 0

    通过改变我的工作:

    historyApiFallback: {
      index: '/app',
    }
    

相关问题