当前位置：首页 > news >正文

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

news 2026/5/27 1:57:51

常规配置适用"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'],},// 全局 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 部署

查看全文

http://www.rkmt.cn/news/116254.html