Question

我想在React中使用superstatic来托管我的构建文件。

运行npm run host后，将构建我的文件并启动超静态。

请参见下面的代码。

package.json-在'./ application / dist'中是我的构建文件

"scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "npm run lint && webpack --mode production",
    "host": "npm run build && superstatic ./application/dist --port 3000",
    "test": "jest",
    "lint": "eslint . --ext .js,.ts,.tsx",
    "lint:fix": "npm run lint -- --fix"
  },
"devDependencies": {...},
"dependencies": {
    "@material-ui/core": "^4.0.1",
    "connected-react-router": "^6.4.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.1",
    "react-redux": "^7.0.3",
    "react-router-dom": "^5.0.0",
    "redux": "^4.0.1",
    "redux-saga": "^1.0.2",
    "superstatic": "^6.0.4"
  }

superstatic.json

{
  "rewrites": [
    {
      "source": "*",
      "destination": "/index.html"
    }
  ]
}

我得到的：

当我打开localhost：3000时，我可以看到我的应用程序，但是当刷新浏览器时，我会收到“无法获取/ some_url ”。

我想要的：

我希望获取/ 一些url 上的内容，但我却收到“无法获取/ some_url ”。

有人知道如何解决此问题吗？

Answer 1

这是您的.htaccess（或nginx.conf）的问题。

尝试：

<ifModule mod_rewrite.c>


  #######################################################################
  # GENERAL                                                             #
  #######################################################################

  # Make apache follow sym links to files
  Options +FollowSymLinks
  # If somebody opens a folder, hide all files from the resulting folder list
  IndexIgnore */*


  #######################################################################
  # REWRITING                                                           #
  #######################################################################

  # Enable rewriting
  RewriteEngine On

  # If its not HTTPS
  RewriteCond %{HTTPS} off

  # Comment out the RewriteCond above, and uncomment the RewriteCond below if you're using a load balancer (e.g. CloudFlare) for SSL
  # RewriteCond %{HTTP:X-Forwarded-Proto} !https

  # Redirect to the same URL with https://, ignoring all further rules if this one is in effect
  RewriteRule ^(.*) https://%{HTTP_HOST}/$1 [R,L]

  # If we get to here, it means we are on https://

  # If the file with the specified name in the browser doesn't exist
  RewriteCond %{REQUEST_FILENAME} !-f

  # and the directory with the specified name in the browser doesn't exist
  RewriteCond %{REQUEST_FILENAME} !-d

  # and we are not opening the root already (otherwise we get a redirect loop)
  RewriteCond %{REQUEST_FILENAME} !\/$

  # Rewrite all requests to the root
  RewriteRule ^(.*) /

</ifModule>

<IfModule mod_headers.c>
  # Do not cache sw.js, required for offline-first updates.
  <FilesMatch "sw\.js$">
    Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
    Header set Pragma "no-cache"
  </FilesMatch>

Answer 2

经过一番研究，我发现superstatic甚至没有拥有 pushState的代码。

他们仅在README.md中并在package.json文件中作为关键字提到pushState。

如您所见：

解决方案

改为使用spa-http-server。

如何在React中使用超静态

2 个答案: