如何使用Nuxt.js同时生成两个静态应用并输出至不同dist目录

该需求完全可以实现，核心通过环境变量区分构建目标，分别配置路由过滤规则与输出目录即可，具体实现步骤如下：

步骤1：调整 nuxt 配置文件 #

在nuxt.config.js（Nuxt 2）或nuxt.config.ts（Nuxt 3）中增加环境变量判断逻辑，根据构建目标指定输出目录、过滤不需要的路由，公共配置保持不变即可实现资源共用：

// nuxt.config.js
const buildTarget = process.env.BUILD_TARGET
const config = {
  // 原有通用配置：components、css、plugins等全局配置保持不变
  target: 'static',
}

// 针对不同构建目标做差异化配置
if (buildTarget === 'app') {
  config.generate = {
    dir: 'dist_app',
    // 排除/pages/main下的所有路由
    exclude: [/^\/main/],
  }
  // 可单独配置app站点的专属配置，比如站点标题、接口地址等
  config.head = {
    title: 'App 站点'
  }
} else if (buildTarget === 'main') {
  config.generate = {
    dir: 'dist_main',
    // 排除/pages/app下的所有路由
    exclude: [/^\/app/],
  }
  config.head = {
    title: 'Main 站点'
  }
}

export default config

步骤2：配置构建命令 #

在package.json的scripts节点新增两个独立构建命令，需要兼容Windows系统的话可先执行npm i cross-env -D安装跨平台环境变量工具：

{
  "scripts": {
    // Mac/Linux 直接使用
    "generate:app": "BUILD_TARGET=app nuxt generate",
    "generate:main": "BUILD_TARGET=main nuxt generate",
    // 跨Windows/Mac/Linux 替换为下面的命令
    // "generate:app": "cross-env BUILD_TARGET=app nuxt generate",
    // "generate:main": "cross-env BUILD_TARGET=main nuxt generate",
  }
}

执行构建 #

• 生成dist_app目录执行：npm run generate:app
• 生成dist_main目录执行：npm run generate:main

注意事项 #

• 两个站点的公共组件、工具函数、静态资源都可以正常共用，不需要重复编写
• 构建出来的两个目录完全独立，没有冗余路由和资源，可直接分别部署到对应域名
• 如果存在动态路由需要预渲染，在对应buildTarget的generate.routes配置项中单独配置即可

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