在静态站点上提供未生成的文件

Question

我正在Cloudflare工作者上使用Nuxt部署静态生成的站点。到目前为止效果很好。

我在生成时生成了大多数静态文件，但是，在某些情况下，我无法生成文件，例如，下订单后，我将无法生成/order/82781路由。我想如何使用.htaccess服务该文件（如果不存在index.html文件？），如果该文件不存在，那么vue / nuxt将接管并发送请求以查找订单？

位置是：/ my-account / orders / {some_id}

我已经尝试过/ my-account / orders目录中的htaccess：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

但是那不起作用。如果我直接访问URL，则会出现此错误：

could not find my-account/orders/wc_order_sp8DykeTNqMMO/index.html in your content namespace

Answer 1

听起来您网站的某些部分并非完全是静态的。 “ htaccess”文件提供了指向Apache Web服务器以动态处理请求的指示，但是您没有使用Apache，而是使用了Workers。在Workers中，我们通过编写JavaScript来“配置” Web服务器。好消息是，与htaccess（仅限于狭窄的功能集）不同，在JavaScript中，您几乎可以做任何事！

[使用wrangler generate生成Workers Sites项目时，它创建了一个名为workers-site/index.js的文件。该文件是从a template复制而来的，但是您可以对其进行编辑以向站点添加动态功能。

听起来您想要做的就是确保/my-account/orders/*始终提供相同的HTML文件。让我们用JavaScript进行编程。

在您的index.js中，您会看到这样的评论：

  /**
   * You can add custom logic to how we fetch your assets
   * by configuring the function `mapRequestToAsset`
   */
  // options.mapRequestToAsset = handlePrefix(/^\/docs/)

此handlePrefix功能为defined at the bottom of the file。实际上是一个例子。该示例代码通过删除前缀来修改路径名。

您想做类似但不太相同的事情：您想匹配以/my-account/orders/开头的路径，然后要删除其余的路径。因此，您可以编写这样的函数：

function stripOrderNumber(prefix) {
  return request => {
    let url = new URL(request.url)
    if (url.pathname.startsWith("/my-account/orders/")) {
      // Treat as if the order number weren't given.
      url.pathname = "/my-account/orders/"

      // Update the Request object with the modified URL.
      request = new Request(url, request)
    }

    // Invoke default handling from here.
    // (`mapRequestToAsset` is imported from '@cloudflare/kv-asset-handler'
    // at the top of this file.)
    return mapRequestToAsset(request)
  }
}

现在返回到注释行并将其更改为：

  /**
   * You can add custom logic to how we fetch your assets
   * by configuring the function `mapRequestToAsset`
   */
  options.mapRequestToAsset = stripOrderNumber

部署更新的工作程序，现在/my-account/orders/*应该映射到/my-account/orders/index.html！