Nuxt/Vue中Composable导入readFileSync报错求助

你在Composable里直接使用了Node.js的fs模块和path模块，这些是仅Node.js环境可用的API，而Nuxt在构建时会把前端代码打包到浏览器环境运行，浏览器不支持这些模块，因此出现导出错误。

针对Nuxt项目读取配置文件，有几种正确的处理方式：

1. 区分服务器端/客户端执行逻辑（推荐） #

将文件读取逻辑限定在服务器端执行，Nuxt提供了process.server变量用于判断环境：

// composables/useReadFileUtils.ts
import { readFileSync } from 'fs';
import { fileURLToPath } from 'url';
import path from 'path';

let reader: () => string | undefined;
let readAll: (paths: string[]) => any | undefined;

if (process.server) {
  const __filename = fileURLToPath(import.meta.url);
  const __dirname = path.dirname(__filename);
  const RESOURCE_PROPS_PATH = '<path-to-resource>';

  reader = () => {
    return readFileSync(path.resolve(__dirname, RESOURCE_PROPS_PATH), 'utf-8');
  };

  readAll = (paths: string[]) => {
    // 此处文件读取逻辑同样要放在process.server判断内
    // ...你的业务代码
  };
}

export default () => {
  return {
    reader,
    readAll
  };
};

2. 将配置文件转为静态资源 #

如果配置文件无需动态生成，可将其放入项目的public目录，通过客户端请求获取：

• 把配置文件放到public/config.properties
• 在组件中发起请求：

<script lang="ts" setup>
const loadConfig = async () => {
  const res = await fetch('/config.properties');
  const content = await res.text();
  // 处理配置内容
};
loadConfig();
</script>

3. 使用Nuxt内置配置机制 #

如果是配置项而非纯文本文件，更推荐通过nuxt.config.ts或.env管理，用useRuntimeConfig()获取：

• 在nuxt.config.ts中配置：

export default defineNuxtConfig({
  runtimeConfig: {
    // 仅服务器端可访问
    serverConfig: '',
    // 客户端可访问的公开配置
    public: {
      clientConfig: ''
    }
  }
});

• 在组件/Composable中读取：

const config = useRuntimeConfig();
console.log(config.public.clientConfig);

• Nuxt的Composable会在客户端和服务器端都执行，因此客户端代码绝对不能调用Node.js专属API，必须用process.server/process.client做环境隔离
• 涉及文件读取、操作系统交互的逻辑，尽量放在服务器端完成，再通过接口或状态管理传递给客户端

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