根据环境有条件地在Gatsby-config中呈现siteUrl属性 [英] conditionally render siteUrl property in Gatsby-config based on environment

问题描述

我想在我的 gatsby-config.js 中设置一个简单的表达式，该表达式确定我是在本地工作还是在生产中，以便可以设置 siteUrl 属性.

I would like to set up a simple expression in my gatsby-config.js that determines whether I am working locally or in production so that I can set the siteUrl property appropriately.

我的gatsby-config (带有伪代码):

My gatsby-config (with psuedo code):

module.exports = {
    siteMetadata: {
        title: "My title",
        description: "My description...",
        siteUrl: (process.env=DEVELOPMENT) ? "/" : "https://example.com /* something here */
  }, {
     ... 
  }

使用简单的JS，字符串文字等是否可行??

Is this possible with simple JS, string literals, etc.. ?

推荐答案

经过反复试验，我找到了解决问题的方法(以及一些陷阱).

After some trial and error, I've found the solution to my problem (along with a couple of gotchas).

根据

The first distinction I had to make was between OS vars and project vars, as per the Gatsby docs. I wasn't too clear on that but decided that my root URL was a project environment variable as it changed depending on whether I was in production or development.

也就是说，我只需要在各自的 .env 文件中定义我的URL:

That said, I only needed to define my URLs in their respective .env files:

// .env.development
SITE_URL=http://localhost:8000

NB :您必须在localhost上定义HTTP协议，否则会遇到 Gatsby链接的未处理的拒绝，无效的URL 错误.我发现它必须是HTTP才能工作.

N.B: You have to define the HTTP protocol on localhost, otherwise you'll run into an unhandled rejection, invalid URL error with Gatsby link. I found it has to be HTTP to work.

// .env.production
SITE_URL=https://myproductionsite.com

接下来，在我的 gatsby-config.js 中，我必须在顶部包括 dotenv 包(如Gatsby文档中所述):

Next, in my gatsby-config.js, I had to include the dotenv package at the top (as also noted in the Gatsby docs):

// gatsby-config.js
require("dotenv").config({
    path: `.env.${process.env.NODE_ENV}`,
})

但是，尝试启动gatsby开发(或生产)服务器时，我一直遇到无法解决'fs'模块的问题.我来自

However, trying to spin up the gatsby development (or production) server, I kept running into a problem with can't resolve 'fs' module. I came to find this article from Gatsby troubleshooting docs and added the following to my gatsby-node.js file to resolve it:

exports.onCreateWebpackConfig = ({ actions }) => {
    actions.setWebpackConfig({
        node: {
            fs: "empty",
        },
    })
}

因此，最终，我能够将以下内容简单地放在 gatsby-config.js 文件的 siteMetadata 部分中:

So ultimately, I was able to simply put the following in my siteMetadata section of the gatsby-config.js file:

// gatsby-config.js
require("dotenv").config({
    path: `.env.${process.env.NODE_ENV}`,
})
siteMetadata: {
    title: "My Site",
    description: "My description...",
    ...
    siteUrl: process.env.SITE_URL,
    ...

这会产生所需的行为，并根据环境调用适当的SITE_URL变量.

This produces the desired behavior, calling up the proper SITE_URL variable based on environments.

还请注意，仅当我在 siteMetadata 对象中包含属性 siteUrl 时，才会发生此问题.如果可以的话，我会使用它作为站点范围内的变量，以实现SEO等目的.

Also note, this issue only happened when I included the property siteUrl in my siteMetadata object. If I could have taken it out I would have but am using it as a sitewide variable for SEO purposes and more.

Gotcha :如果您使用的是Netlify，则需要在与 SITE_URL 相匹配的构建环境中设置Env Var变量无法在 gatsby-config 中按原样工作.

Gotcha: If you're using Netlify you'll need to set up an Env Var in your build environment matching SITE_URL or else your build will break as the production variable won't work in the gatsby-config as is.

这篇关于根据环境有条件地在Gatsby-config中呈现siteUrl属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！