惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

I
InfoQ
Engineering at Meta
Engineering at Meta
GbyAI
GbyAI
A
About on SuperTechFans
aimingoo的专栏
aimingoo的专栏
P
Privacy & Cybersecurity Law Blog
Cloudbric
Cloudbric
云风的 BLOG
云风的 BLOG
S
Secure Thoughts
Stack Overflow Blog
Stack Overflow Blog
G
Google Developers Blog
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
S
SegmentFault 最新的问题
博客园 - Franky
T
Tenable Blog
T
The Blog of Author Tim Ferriss
博客园 - 三生石上(FineUI控件)
V
V2EX
Recent Commits to openclaw:main
Recent Commits to openclaw:main
T
Troy Hunt's Blog
罗磊的独立博客
WordPress大学
WordPress大学
SecWiki News
SecWiki News
The Cloudflare Blog
S
Securelist
小众软件
小众软件
Schneier on Security
Schneier on Security
Hacker News - Newest:
Hacker News - Newest: "LLM"
博客园 - 叶小钗
Google Online Security Blog
Google Online Security Blog
Forbes - Security
Forbes - Security
阮一峰的网络日志
阮一峰的网络日志
量子位
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
W
WeLiveSecurity
A
Arctic Wolf
大猫的无限游戏
大猫的无限游戏
The Last Watchdog
The Last Watchdog
C
Cybersecurity and Infrastructure Security Agency CISA
宝玉的分享
宝玉的分享
MyScale Blog
MyScale Blog
Security Archives - TechRepublic
Security Archives - TechRepublic
博客园 - 司徒正美
Vercel News
Vercel News
H
Help Net Security
Y
Y Combinator Blog
PCI Perspectives
PCI Perspectives
L
LINUX DO - 最新话题
H
Hackread – Cybersecurity News, Data Breaches, AI and More

博客园 - 一丝心情

Volta 安装和使用指南 免费国产ai试用总结 glb格式3d模型压缩 免费的云数据库 vue 实用指令 IntelliJ IDEA license server 激活(亲测有效) win10/win11专业版激活码(亲测有效) Git 常用指令完全指南 npm 安装依赖报错整理 css3文字渐变, svg文字渐变 http/https与websocket的ws/wss的关系 指令 v-tooltip vue 自定义指令实现v-overflow-tooltip element-ui NavMenu 多级嵌套封装 常用css vue.config.js config.resolve.alias 目录别名配置 three.js 在低版本浏览报THREE.WebGLProgran: shader error 报错解决办法 nuxt 低版本浏览器兼容babel编译配置 常用软件历史版本下载 前端常用指令 数组常用方法总结 vue 中 echarts 添加事件 常用正则
nuxt.js 项目流水线自动部署设置
一丝心情 · 2025-12-17 · via 博客园 - 一丝心情

常规配置适用"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 部署