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'],},// 全局 CSScss: ['~/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: buildimage: node:14.18.1-alpinebefore_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 houronly:- main# 关键：Pages 专属作业（名称必须是 pages，否则 GitLab 不识别）
pages:stage: pagesimage: alpine:latestdependencies:- build # 依赖 build 作业的 public 产物script:- echo "GitLab Pages 自动部署（无需额外脚本，GitLab 会自动处理）"artifacts:paths:- public/ # 必须输出 public 目录，作为 Pages 站点根目录expire_in: 1 dayonly:- main # 只在 main 分支触发 Pages 部署