React Vite+TypeScript项目本地构建成功，Jenkins流水线构建失败求助

我有一个基于React Vite + TypeScript + SWC的项目，本地和同事机器上执行构建都成功，功能测试正常，但在Jenkins流水线执行构建时失败。

报错信息 #

17:23:17 rendering chunks...
17:23:37 [31m[vite:build-html] The "fileName" or "name" properties of emitted chunks and assets must be strings that are neither absolute nor relative paths, received "f:/Jenkins/workspace/CI.DevOps/web/index.html".[39m
17:23:37 [32m✓ built in 54.67s[39m
17:23:37 [31merror during build:
17:23:37 RollupError: The "fileName" or "name" properties of emitted chunks and assets must be strings that are neither absolute nor relative paths, received "f:/Jenkins/workspace/CI.DevOps/web/index.html".
17:23:37     at error (file:///f:/Jenkins/workspace/CI.DevOps/web/node_modules/vite/node_modules/rollup/dist/es/shared/parseAst.js:337:30)
17:23:37     at FileEmitter.emitFile (file:///f:/Jenkins/workspace/CI.DevOps/web/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:18145:24)
17:23:37     at Object.generateBundle (file:///f:/Jenkins/workspace/CI.DevOps/web/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:38945:22)
17:23:37     at async Bundle.generate (file:///f:/Jenkins/workspace/CI.DevOps/web/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:17006:9)
17:23:37     at async file:///f:/Jenkins/workspace/CI.DevOps/web/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:19552:27)
17:23:37     at async catchUnfinishedHookActions (file:///f:/Jenkins/workspace/CI.DevOps/web/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:18983:16)
17:23:37     at async build (file:///f:/Jenkins/workspace/CI.DevOps/web/node_modules/vite/dist/node/chunks/dep-R0I0XnyH.js:66815:22)
17:23:37     at async CAC.<anonymous> (file:///f:/Jenkins/workspace/CI.DevOps/web/node_modules/vite/dist/node/cli.js:845:9)�[39m
17:23:37 error Command failed with exit code 1.
17:23:37 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
17:23:37 Build step 'Execute Windows batch command' marked build as failure

项目配置 #

tsconfig.json #

{
  "compilerOptions": {
    "useDefineForClassFields": true,
    "lib": ["ES2023", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "target": "es2022",

    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    "strict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noFallthroughCasesInSwitch": true,

    "allowJs": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": { "@/*": ["src/*"] }
  },
  "include": ["src", ".eslintrc.js"]
}

vite.config.ts #

import react from '@vitejs/plugin-react-swc';
import path from 'path';
import { visualizer } from 'rollup-plugin-visualizer';
import { defineConfig, PluginOption } from 'vite';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [
    react(),
    svgr(),
    visualizer({
      template: 'treemap',
      gzipSize: true,
      brotliSize: true,
      filename: '.stats/treemap.html',
    }) as PluginOption,
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
});

package.json中的build命令 #

"build": "cross-env CI=false && tsc && vite build --outDir build",

原因分析 #

这个报错是因为Rollup（Vite底层依赖）检测到输出的资源文件名是绝对路径（f:/Jenkins/workspace/CI.DevOps/web/index.html），而Rollup要求资源文件名必须是纯文件名或相对目录下的文件名，不能是绝对路径。

核心问题出在Windows环境下的路径解析或命令语法：

1. Windows批处理中，cross-env后的&&语法可能导致环境变量未正确传递，进而干扰Vite的路径计算。
2. Jenkins工作空间的盘符绝对路径，结合Vite默认的路径解析逻辑，可能错误地将输出路径生成为绝对路径。

解决方案 #

1. 修复build命令的语法兼容问题 #

Windows批处理中，多命令连接建议用&或拆分命令，确保cross-env的环境变量生效：

// 方案1：替换&&为&
"build": "cross-env CI=false tsc & vite build --outDir build"

// 方案2：拆分为子命令，更清晰
"build": "cross-env CI=false npm run build:ts && npm run build:vite",
"build:ts": "tsc",
"build:vite": "vite build --outDir build"

2. 显式指定Vite的根目录和路径解析 #

修改vite.config.ts，用process.cwd()替代__dirname，明确指定项目根目录，避免绝对路径传递：

import react from '@vitejs/plugin-react-swc';
import path from 'path';
import { visualizer } from 'rollup-plugin-visualizer';
import { defineConfig, PluginOption } from 'vite';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  root: process.cwd(), // 显式指定项目根目录
  plugins: [
    react(),
    svgr(),
    visualizer({
      template: 'treemap',
      gzipSize: true,
      brotliSize: true,
      filename: '.stats/treemap.html',
    }) as PluginOption,
  ],
  resolve: {
    alias: {
      '@': path.resolve(process.cwd(), 'src'), // 改用process.cwd()解析路径
    },
  },
});

3. 检查Jenkins工作空间配置 #

• 确保Jenkins运行用户对工作空间目录有完整读写权限
• 避免工作空间路径包含空格或特殊字符，若有则调整路径

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