0

我正在 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
4

1 回答 1

0

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

当您使用 生成您的 Workers Sites 项目时wrangler generate，它创建了一个名为workers-site/index.js. 此文件是从模板复制而来的，但您可以自由编辑它以向您的站点添加动态功能。

听起来您想要做的是确保/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函数在文件底部定义。它实际上是一个例子。示例代码通过去除前缀来修改路径名。

你想做一些类似但不完全相同的事情：你想匹配以 开头的路径/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!

于 2020-02-28T15:14:33.737 回答