如何在nuxt.config.js内使用PublicRuntimeConfig变量配置路由？

• publicRuntimeConfig是Nuxt专门提供给运行时环境（组件、插件、中间件等）调用的配置入口，你在router.extendRoutes里用到的this根本不指向运行时的$config实例，所以直接用this.ABOUT.URL或者$config都无法拿到值。
• 你已经在publicRuntimeConfig里通过process.env读取了环境变量，同配置文件内不需要跨配置项调用，直接复用取值逻辑即可。

两种方案可按需选择：

方案1：直接读取环境变量（最简单） #

在extendRoutes里直接读取.env里的变量，默认值和publicRuntimeConfig保持一致即可：

// nuxt.config.js
export default {
  publicRuntimeConfig: {
    PAGE_TITLE: process.env.PAGE_TITLE || "Company",
    ABOUT: {
      NAME: process.env.ABOUT_NAME || "About us",
      URL: process.env.ABOUT_URL || "/about"
    },
  },
  router: {
    extendRoutes: routesIn => {
      const aboutUrl = process.env.ABOUT_URL || "about"
      routesIn.forEach(r => {
        if (r.path.includes("/about")) {
          // 去除url前的斜杠避免路径出现双斜杠
          r.path = r.path.replace("/about","/" + aboutUrl.replace(/^\//,''));
        }
      })
    }
  }
}

方案2：抽离公共变量（适合多场景复用） #

如果不想写重复的默认值，可以把公共配置提前抽到nuxt.config.js顶部，两个配置项共用同一个变量：

// nuxt.config.js 顶部提前定义公共配置
const ABOUT_CONFIG = {
  NAME: process.env.ABOUT_NAME || "About us",
  URL: process.env.ABOUT_URL || "/about"
}

export default {
  publicRuntimeConfig: {
    PAGE_TITLE: process.env.PAGE_TITLE || "Company",
    ABOUT: ABOUT_CONFIG
  },
  router: {
    extendRoutes: routesIn => {
      routesIn.forEach(r => {
        if (r.path.includes("/about")) {
          r.path = r.path.replace("/about","/" + ABOUT_CONFIG.URL.replace(/^\//,''));
        }
      })
    }
  }
}

后续在组件内使用路径时，直接调用$config.ABOUT.URL即可，两边取值完全一致，不会出现配置不同步的问题。

内容的提问来源于stack exchange，提问作者Jeffrey van Zwam