javascript - 每当我转到使用特定组件的路径时，react-loadable 都会出现 404 错误

Question

到目前为止，我一直在尝试对我的概念网站进行代码拆分，但似乎行不通。我有一个 STLMain 组件(STLMain.js):

import React from 'react';

export default () => (
  <div>
    STLMain
  </div>
);

在STLMainLoadable.js中使用:

import React from 'react';
import Loadable from 'react-loadable';

const loading = () => (
  <div>
    Loading...
  </div>
);

export default Loadable({
  loader: () => import('./STLMain'),
  loading
});

然后在我的 Router.js 中使用它

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './main_pages/Home';
import NotFound from './main_pages/NotFound';
import STLMainLoadable from './main_pages/STLMainLoadable';
import Navigation from './navigation/Navigation';

export default () => (
  <BrowserRouter>
    <div>
      <Navigation />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/STLMain" component={STLMainLoadable} />
        <Route component={NotFound} />
      </Switch>
    </div>
  </BrowserRouter>
);

每次我转到 localhost:8080/STLMain 时，我都会在控制台中收到两个错误:

1.获取http://localhost:8080/0.bundle.js 404(未找到)
2.拒绝从'http://localhost:8080/0.bundle.js执行脚本' 因为它的 MIME 类型('text/html')不可执行，并且启用了严格的 MIME 类型检查。

是的，我安装了 syntax-dynamic-import babel 插件。我该怎么做才能解决这个问题？

Answer 1

如果您还没有，请尝试在您的 webpack.config.js 中设置 output.publicPath = '/':

output: {
  ...
  publicPath: '/',
  ...
}

Credit where credit is due