Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/88.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何删除后缀斜杠"/&引用;从网页| Gatsby中的资产url_Javascript_Html_Reactjs_Webpack_Gatsby - Fatal编程技术网

Javascript 如何删除后缀斜杠"/&引用;从网页| Gatsby中的资产url

Javascript 如何删除后缀斜杠"/&引用;从网页| Gatsby中的资产url,javascript,html,reactjs,webpack,gatsby,Javascript,Html,Reactjs,Webpack,Gatsby,我正在从webpack生成一个构建。但每当它生成一个构建时,它就会创建一个index.html文件以及其他文件,但在index.html中,它会添加带有后缀“/”的script标记。我想在webpack中添加一个配置,只添加不同资产的文件名,而不是后缀“/” My index.html: <head> <meta charSet="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /

我正在从webpack生成一个构建。但每当它生成一个构建时,它就会创建一个
index.html
文件以及其他文件,但在
index.html
中,它会添加带有后缀“/”的
script
标记。我想在webpack中添加一个配置,只添加不同资产的文件名,而不是后缀“/”

My index.html:

<head>
  <meta charSet="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="generator" content="Gatsby 2.1.19" />
  <link as="script" rel="preload" href="/component---src-templates-all-pokemon-js-d59d33d2742ee8d7199e.js" />
  <link as="script" rel="preload" href="/app-a6912420758bcc3e24a1.js" />
  <link as="script" rel="preload" href="/webpack-runtime-65c9ddc0802b64490fd8.js" />
  <link as="fetch" rel="preload" href="/static/d/382/path---index-6a9-UNWMCjcHKgbI17oOwICQKH7zPs.json"
    crossorigin="use-credentials" />
</head>

但我希望每件事都是这样

<head>
  <meta charSet="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="generator" content="Gatsby 2.1.19" />
  <link as="script" rel="preload" href="component---src-templates-all-pokemon-js-d59d33d2742ee8d7199e.js" />
  <link as="script" rel="preload" href="app-a6912420758bcc3e24a1.js" />
  <link as="script" rel="preload" href="webpack-runtime-65c9ddc0802b64490fd8.js" />
  <link as="fetch" rel="preload" href="static/d/382/path---index-6a9-UNWMCjcHKgbI17oOwICQKH7zPs.json"
    crossorigin="use-credentials" />
</head>


我知道我必须更改我的网页包配置,但我无法对盖茨比中的所有资产文件进行更改。我想对从浏览器加载的每个文件都执行此操作。

我认为没有任何方法可以删除开头斜杠,但是如果您的gatsby站点不是域的根,例如
www.example.com/blog/
,您可以使用路径前缀

使用路径前缀构建站点有两个步骤

  • 首先在站点的gatsby-config.js中定义前缀
  • gatsby-config.js

    module.exports={
    //注意:它必须*不*有尾随斜杠。
    路径前缀:`/blog`,
    }
    
  • 然后将
    --前缀路径
    cmd选项传递给盖茨比

    gatsby构建——前缀路径


  • 我知道路径前缀。我想知道资产的情况。问题是,我正在从一个S3 bucket服务多个网站。因此,每当它在资源url中找到“/”时,它就会转到根目录,而不是在该特定文件夹中找到资产。我手动尝试删除index.html中的所有斜杠,但控制台上出现了一些react错误,并且资产加载不正确。为什么多个网站需要一个存储桶?@AlqamaBinSadiq我不明白<代码>路径前缀
    适用于所有内容,您能给我们一个不适用的电子示例吗?路径前缀用于URL而不是资产。我只想删除所有资源url中的所有前缀斜杠
    pathPrefix
    不会删除第一个斜杠,但它会将aset url相应地设置为指定目录:资源url将是
    /{pathPrefix}/assetURL
    ,而不是
    /assetURL
    。但是您必须在构建时知道目录