React build在子目录

时间:2019-02-05 12:26:12

标签: reactjs build service-worker progressive-web-apps

我正在用reactjs创建渐进式Web应用程序。当我在服务器子目录中部署build时,除了页脚外,它不会显示任何内容。

这是我针对子目录路径问题的应用解决方案。 (Ref:https://medium.com/@svinkle/how-to-deploy-a-react-app-to-a-subdirectory-f694d46427c1)static / chunk.css路径问题已解决,但组件未渲染。是否有与服务工作者相关的任何东西?

这是App.js

`<BrowserRouter basename={'/buildTest'}>
                    <div>
                        <PrivateRoute exact path={`${process.env.PUBLIC_URL}/`} component={Artist} />
                        <Route path={`${process.env.PUBLIC_URL}/Login`} component={Login} />
    </div>
</BrowserRouter>
<Footer />`

将此添加到package.json中

"homepage": "http://localhost/buildTest",

这是public / worker.js

`self.addEventListener('install', function(event) {
  if (doCache) {
    event.waitUntil(
      caches.open(CACHE_NAME)
        .then(function(cache) {
          fetch('asset-manifest.json')
            .then(response => {
              response.json();
            })
            .then(assets => {
              const urlsToCache = [
                '/',
                '../public/index.html',
                'index.js',
                'App.js',
                  'App.css'
              ];
              cache.addAll(urlsToCache);
            })
        })
    );
  }
});`

在浏览器中获取此错误以及找不到组件的路径:

`Uncaught (in promise) TypeError: Request failed`

终端输出:npm run build

`> reduxapi@0.1.0 build /var/www/html/demo-pwa
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  444.21 KB  build/static/js/1.cc99dd57.chunk.js
  50.26 KB   build/static/css/1.97a0600d.chunk.css
  12.32 KB   build/static/js/main.9414fd42.chunk.js
  5.11 KB    build/static/css/main.d11e5f11.chunk.css
  768 B      build/static/js/runtime~main.04414a6d.js

The project was built assuming it is hosted at /buildTest/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.`

please check network screenshot here

我只是在寻找有关我可能做错事情的任何可能解释。非常感谢。

0 个答案:

没有答案