Webpack Dev Server React 子文件夹不工作

Posted 2023-02-21

【中文标题】Webpack Dev Server React 子文件夹不工作

【英文标题】：Webpack Dev Server React Subfolder Not Working

【发布时间】：2018-09-27 18:31:33

【问题描述】：

我有一个 webpack 开发服务器，我想从一个文件夹中提供服务。示例网址为：

本地主机/应用程序

我的 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 来加载我的应用程序。但是由于我使用的是 react，所以我想使用路由器，当我转到该子文件夹下的路由时，我得到一个错误：

Cannot GET /app/user

如果我将所有内容从 / 更改回服务器，那么路由将起作用。我想从一个文件夹中提供服务，并且仍然使用 webpack 开发服务器进行路由工作，但我不确定这是否可能。

这是我的应用和路线。

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

【问题讨论】：

你能发布你的路线吗？

我已经添加了。

这是您的LazyRoute 的问题。您正在提供导致它失败的相对导入。不知道你会如何解决它。尝试在你的导入前加上 /app?

我将它重构为仅使用 react 路由器并删除了 LazyRoute，它仍然给出相同的结果

【参考方案1】：

我通过改变让它工作：

historyApiFallback: 
  index: '/app',