Gatsby: what's the difference between basepath and path prefix?

问题

I don't understand the difference between basepath and path prefix in Gatsby, and when to use each feature

Basepath: https://www.gatsbyjs.org/tutorial/part-seven/

Path prefix: https://www.gatsbyjs.org/docs/path-prefix/

回答1:

TL:DR

pathPrefix has much more impact on your site — it add a prefix to the generated url of all your pages and assets. basePath is just a helper for generating slug from your filesystem — In my experience with Gatsby I rarely use it at all.

pathPrefix

It appends a prefix to url of all your pages & assets. This way, you can deploy Gatsby site as a sub directory of another site.

Without Prefix             | With 'blog' Prefix
---------------------------|--------------------------------
myblog.com/                | myblog.com/blog
myblog.com/hello/          | myblog.com/blog/hello
myblog.com/image-123.png   | myblog.com/blog/image-123.png

basePath

It's an option of createFilePath which helps you create slug from your project structure. It doesn't affect whether you're serving your Gatsby from root or not.

If your project directory is like this:

<root>
  |--content
  |     |--writing
  |     |    `--page1.md
  |     `--images
  |          `--cat.md
  |
  |--gatsby-config.js
 ...

And you set this in your gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/content`,
        name: 'content'
      }
    }
  ]
}

Then createFilePath will return this slug for your file: writing/page1/, which maybe not what you want. Maybe you want it to be /page1/. In this case, setting basePath to writing will return /page1/.

来源：https://stackoverflow.com/questions/60245845/gatsby-whats-the-difference-between-basepath-and-path-prefix

标签

gatsby

jamstack