如何在Vue页面中访问Nuxt 2的nuxt.config.js配置？

方案一：抽离公共配置文件（推荐） #

将路由配置集中到单独文件，供nuxt.config.js和页面组件共同引用，彻底消除代码重复。

1. 创建公共配置文件
   在项目根目录下新建config/generatedRoutes.js，存放路由列表并解析出允许的tool参数：

// ~/config/generatedRoutes.js
export const allowedRoutes = [
  "/calculatrice/indice-de-masse/",
  "/calculator/body-fat/",
];

// 从路由中提取允许的tool参数，供页面校验使用
export const allowedTools = allowedRoutes.map(route => {
  const pathSegments = route.split('/').filter(segment => segment);
  return pathSegments[0];
});

2. 在nuxt.config.js中引用配置
   导入公共文件中的路由列表，替换原有的generate.routes配置：

// nuxt.config.js
import { allowedRoutes } from './config/generatedRoutes';

export default {
  // ...其他项目配置
  generate: {
    routes: allowedRoutes
  }
}

3. 在页面组件中使用配置校验路由
   在动态路由页面的validate函数中导入允许的tool列表，直接用于校验：

// pages/_tool/_targetlanguage/index.vue
import { allowedTools } from '~/config/generatedRoutes';

export default {
  async validate({ params }) {
    // 校验当前tool参数是否在允许列表内
    return allowedTools.includes(params.tool);
  }
}

方案二：通过Nuxt公共运行时配置传递参数 #

如果不想新增额外文件，可以将允许的tool列表注入到Nuxt的公共运行时配置中，让页面组件直接访问。

1. 在nuxt.config.js中配置公共运行时参数
   在配置中解析出允许的tool列表，并添加到publicRuntimeConfig：

// nuxt.config.js
const allowedRoutes = [
  "/calculatrice/indice-de-masse/",
  "/calculator/body-fat/",
];
const allowedTools = allowedRoutes.map(route => {
  const pathSegments = route.split('/').filter(segment => segment);
  return pathSegments[0];
});

export default {
  // ...其他项目配置
  generate: {
    routes: allowedRoutes
  },
  publicRuntimeConfig: {
    allowedTools: allowedTools
  }
}

2. 在页面组件中访问公共配置
   在validate函数中通过上下文的$config直接获取允许的tool列表：

// pages/_tool/_targetlanguage/index.vue
export default {
  async validate({ params, $config }) {
    return $config.allowedTools.includes(params.tool);
  }
}

内容的提问来源于stack exchange，提问作者Cliff Helsel