Nuxt服务端如何为Playwright指定CSS文件路径以生成PDF

核心思路：使用文件系统绝对路径 #

Nuxt服务端运行时的工作目录和开发环境可能不一致，硬编码相对路径容易出错，推荐通过Node.js的路径模块拼接绝对路径来定位CSS文件。

方案1：直接传入文件绝对路径 #

根据你使用的Nuxt版本，选择对应的代码：

Nuxt 3

假设你的CSS文件放在assets/styles/pdf-styles.css，在服务端代码中这样获取路径：

import { fileURLToPath } from 'node:url';
import { dirname, join } from 'node:path';

// 获取当前文件的绝对路径，避免工作目录变化导致路径错误
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

// 拼接CSS文件的绝对路径，根据你的文件位置调整层级
const stylePath = join(__dirname, '../assets/styles/pdf-styles.css');

// 传给Playwright
await page.addStyleTag({ path: stylePath });

Nuxt 2

同样假设CSS文件在assets/styles/pdf-styles.css：

const path = require('path');

// 基于项目根目录拼接绝对路径
const stylePath = path.join(process.cwd(), 'assets/styles/pdf-styles.css');

await page.addStyleTag({ path: stylePath });

方案2：读取CSS内容直接传入（规避路径问题） #

如果路径拼接还是有问题，可以直接读取CSS文件的内容，用content参数替代path：

Nuxt 3

import { readFileSync } from 'node:fs';
import { fileURLToPath } from 'node:url';
import { dirname, join } from 'node:path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const stylePath = join(__dirname, '../assets/styles/pdf-styles.css');

// 读取CSS文件内容
const cssContent = readFileSync(stylePath, 'utf-8');

// 传入内容而非路径
await page.addStyleTag({ content: cssContent });

Nuxt 2

const fs = require('fs');
const path = require('path');

const stylePath = path.join(process.cwd(), 'assets/styles/pdf-styles.css');
const cssContent = fs.readFileSync(stylePath, 'utf-8');

await page.addStyleTag({ content: cssContent });

注意事项 #

• 如果你的CSS文件放在public目录（静态资源目录），只需要把路径中的assets替换成public即可，比如path.join(process.cwd(), 'public/pdf-styles.css')。
• 确保CSS文件在Nuxt构建后仍然存在于指定位置，避免被编译工具移动或压缩（如果不需要编译，建议放在public目录）。

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