嘿，我之前开发vue-cli 3.x插件的时候正好解决过这个问题！其实vue-cli本身就提供了便捷的方式让插件读取项目和全局配置里的自定义信息，不用自己手动去解析文件，我给你一步步讲清楚怎么实现：

vue-cli插件的API里直接提供了访问项目配置的入口，最规范的做法是让用户把你的插件配置放在vue.config.js的pluginOptions字段下（这是vue-cli官方推荐的插件配置存放位置，避免和其他核心配置冲突）。

比如用户的vue.config.js可以这么写：

module.exports = {
  pluginOptions: {
    myCustomPlugin: {
      projectName: 'my-awesome-project',
      outputDir: './extra-files',
      enableFeatureX: true
    }
  }
}

你的插件里可以通过api.service.projectOptions直接拿到这个配置：

module.exports = (api, options, rootOptions) => {
  // 读取插件专属配置，没有的话用空对象兜底
  const pluginConfig = api.service.projectOptions.pluginOptions?.myCustomPlugin || {};

  // 用配置渲染模板文件
  api.render('./templates', {
    ...pluginConfig,
    // 可以在这里添加一些默认值，覆盖配置里的空值
    outputDir: pluginConfig.outputDir || './generated'
  });
};

如果你的插件是在service阶段运行（比如添加命令、修改webpack配置），同样可以通过api.service.projectOptions获取到相同的配置。

如果用户想在全局预设里配置你的插件（比如所有新建项目都用同一个配置），你可以用vue-cli提供的loadRCFile工具函数来读取~/.vuerc文件。

首先需要引入@vue/cli-shared-utils里的工具：

const { loadRCFile } = require('@vue/cli-shared-utils');
const path = require('path');

module.exports = (api, options, rootOptions) => {
  // 拼接全局配置文件的路径
  const vuercPath = path.resolve(process.env.HOME, '.vuerc');
  // 读取并解析~/.vuerc文件
  const globalConfig = loadRCFile(vuercPath) || {};

  // 获取全局配置里的插件信息，两种情况：
  // 1. 用户在预设(presets)里配置了你的插件
  const presetPluginConfig = globalConfig.presets?.['my-global-preset']?.myCustomPlugin || {};
  // 2. 用户直接在~/.vuerc顶层添加了插件配置
  const topLevelPluginConfig = globalConfig.myCustomPlugin || {};

  // 合并全局配置（可以根据需求调整优先级）
  const globalPluginConfig = { ...presetPluginConfig, ...topLevelPluginConfig };

  // 再和项目配置合并，项目配置优先级更高
  const projectPluginConfig = api.service.projectOptions.pluginOptions?.myCustomPlugin || {};
  const finalConfig = { ...globalPluginConfig, ...projectPluginConfig };

  // 用最终配置渲染模板
  api.render('./templates', finalConfig);
};

~/.vuerc的典型结构大概是这样的，你可以对应调整读取路径：

{
  "useTaobaoRegistry": true,
  "presets": {
    "my-global-preset": {
      "plugins": {...},
      "myCustomPlugin": {
        "enableFeatureX": true
      }
    }
  },
  "myCustomPlugin": {
    "outputDir": "./global-generated"
  }
}

为了兼顾用户体验，我一般会采用「先读配置，缺啥补啥」的策略：如果用户已经在配置文件里填好了所有必要信息，直接用配置渲染；如果有缺失的字段，再通过交互询问用户。

示例代码如下：

const inquirer = require('inquirer');
const { loadRCFile } = require('@vue/cli-shared-utils');
const path = require('path');

// 注意这里要用async函数，因为交互是异步的
module.exports = async (api, options, rootOptions) => {
  // 先读取项目和全局的合并配置
  const projectConfig = api.service.projectOptions.pluginOptions?.myCustomPlugin || {};
  const vuercPath = path.resolve(process.env.HOME, '.vuerc');
  const globalConfig = loadRCFile(vuercPath)?.myCustomPlugin || {};
  let finalConfig = { ...globalConfig, ...projectConfig };

  // 检查必要字段是否存在，不存在则发起交互
  if (!finalConfig.projectName) {
    const answers = await inquirer.prompt([
      {
        type: 'input',
        name: 'projectName',
        message: '请输入项目名称:',
        // 用项目默认名称做兜底
        default: api.service.projectOptions.name
      }
    ]);
    finalConfig = { ...finalConfig, ...answers };
  }

  // 渲染模板
  api.render('./templates', finalConfig);
};

这样既满足了喜欢用配置文件的用户，也给临时使用的用户留了交互入口，体验会好很多。

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