nuxt.js 项目流水线自动部署设置

常规配置适用"cloudflare"、"netlify"
1.git存储库 选gitlab 或者 github 需要部署的代码
2.构建配置
　　构建命令（Build command）: npm run generate 
　　构建输出（Publish directory）: dist 
　　根目录(Package directory)[可以空着]:
　　函数目录Functions directory[可以空着或者netlify/functions]:
3.自定义配置变量
　　指定node版本   NODE_VERSION                  14.18.1                         
　　指定npm镜像     NPM_CONFIG_REGISTRY           https://registry.npmmirror.com/  
       指定打包环境     DEPLOY_PLATFORM               cloudflare                       

4. 项目package.josn 配置打包环境项

"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate:default": "DEPLOY_PLATFORM=default nuxt generate",
    "generate:github": "DEPLOY_PLATFORM=github nuxt generate",
    "generate:gitlab": "DEPLOY_PLATFORM=gitlab nuxt generate",
    "generate:cloudflare": "DEPLOY_PLATFORM=cloudflare nuxt generate",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "preview": "nuxt preview"
  }

5. 配置nuxt.config.js

// 先定义各平台的路径配置常量（便于维护）
const platformConfig = {
  default: {
    routerBase: '/',
    publicPath: '/_/',
    axiosBaseURL: 'http://localhost:3000',
    faviconHref: '/favicon.ico'
  },
  github: {
    // 替换为你的 GitHub 仓库名，比如仓库是 username/bbx，则填 /bbx/
    routerBase: '/bbx/',
    publicPath: '/bbx/_/',
    axiosBaseURL: '/',
    faviconHref: '/bbx/favicon.ico'
  },
  gitlab: {
    routerBase: '/bbx/',
    publicPath: '/_/',
    axiosBaseURL: '/',
    faviconHref: '/bbx/favicon.ico'
  },
  cloudflare: {
    routerBase: '/',
    publicPath: '/_/',
    // 替换为你的 Cloudflare Pages 域名
    axiosBaseURL: '/',
    faviconHref: '/favicon.ico'
  }
}

// 获取当前部署平台（默认 fallback 到 default）
const currentPlatform = process.env.DEPLOY_PLATFORM || 'default';
const config = platformConfig[currentPlatform];

export default {
  target: 'static',

  // 路由配置：动态适配各平台
  router: {
    base: config.routerBase,
    trailingSlash: true
  },

  // 页面头部配置
  head: {
    title: '',
    meta: [],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: config.faviconHref },
    ],
    script: [],
    __dangerouslyDisableSanitizers: ['script'],
  },

  // 全局 CSS
  css: ['~/assets/css/main.css'],

  // 插件
  plugins: [],

  components: true,
  buildModules: [],
  modules: ['@nuxtjs/axios', '@nuxtjs/pwa', '@nuxt/content'],

  // Axios 动态适配
  axios: {
    baseURL: config.axiosBaseURL,
  },

  content: {},

  // 构建配置：动态适配 publicPath
  build: {
    publicPath: config.publicPath,
    extractCSS: true,
    optimizeCSS: true,
    extend(config, { isDev, isClient }) {
      if (!isDev && isClient) {
        config.optimization.splitChunks.maxSize = 300000;
      }
    }
  },

  // 生成配置
  generate: {
    dir: 'dist', // 所有平台默认输出到 dist（GitLab 后续手动 mv 到 public）
    fallback: '404.html',
    interval: 100,
  },

  static: {
    prefix: false
  }
}

6.gitlab 流水线  .gitlab-ci.yml 配置,  没有的话创建改文件，与package.josn同级路径下

# .gitlab-ci.yml
# 使用 Nuxt 2.14.6 + Node 14.18.1
stages:
  - build
  - pages  # 改为 pages 阶段（可选，但语义更清晰）

# 缓存配置，加速构建
cache:
  paths:
    - node_modules/
    - .nuxt/
    - dist/

# 构建阶段（注入 GitLab 环境变量，适配路径）
build:
  stage: build
  image: node:14.18.1-alpine
  before_script:
    - echo "设置 npm 镜像..."
    - npm config set registry https://registry.npmmirror.com/
    - npm cache clean --force 
  script:
    - echo "安装依赖..."
    - npm install --no-optional
    - echo "构建项目..."
    - npm run build
    - echo "生成 GitLab 适配的静态文件..."
    # 核心修改：注入 DEPLOY_PLATFORM=gitlab 环境变量，让 nuxt.config.js 适配 GitLab 路径
    - DEPLOY_PLATFORM=gitlab npm run generate  
    - mkdir -p public    # 创建 Pages 要求的 public 目录
    - cp -r dist/* public/  # 把静态文件复制到 public/（Pages 只能识别该目录）
  artifacts:
    paths:
      - public/  # 构建产物输出到 public，供后续 pages 作业使用
    expire_in: 1 hour
  only:
    - main

# 关键：Pages 专属作业（名称必须是 pages，否则 GitLab 不识别）
pages:
  stage: pages
  image: alpine:latest
  dependencies:
    - build  # 依赖 build 作业的 public 产物
  script:
    - echo "GitLab Pages 自动部署（无需额外脚本，GitLab 会自动处理）"
  artifacts:
    paths:
      - public/  # 必须输出 public 目录，作为 Pages 站点根目录
    expire_in: 1 day
  only:
    - main  # 只在 main 分支触发 Pages 部署