使用vue-cli-service构建库时遇styles读取未定义类型错误求助

执行以下构建Vue库的命令时，遭遇错误 Syntax Error: TypeError: Cannot read properties of undefined (reading 'styles')：

$ vue-cli-service build --target lib --name login mod/login/Component/page.vue

错误输出 #

⠴  Building for production as library (commonjs,umd,umd-min)...

 ERROR  Failed to compile with 1 error                                                                                                                                                                     11:07:40 AM

 error  in ./mod/login/Component/page.vue

Syntax Error: TypeError: Cannot read properties of undefined (reading 'styles')

精简后的package.json #

{
    "devDependencies": {
        "@babel/core": "^7.12.16",
        "@babel/eslint-parser": "^7.12.16",
        "@tailwindcss/typography": "^0.5.10",
        "@vue/cli-plugin-babel": "~5.0.0",
        "@vue/cli-plugin-eslint": "~5.0.0",
        "@vue/cli-service": "~5.0.0",
        "eslint": "^7.32.0",
        "eslint-plugin-vue": "^8.7.1",
        "tailwindcss": "^3.4.10"
    },
    "dependencies": {
        "axios": "^1.7.7",
        "core-js": "^3.8.3",
        "toastr": "^2.1.4",
        "vue": "^3.2.13", // 实际安装版本3.5
        "vue-i18n": "^10.0.4",
        "vue-router": "^4.4.5"
        // 衍生依赖
        // webpack@5.95.0
        // vue-loader@17.4.2
    },
...
}

page.vue代码 #

<script>
import {defineComponent} from "vue";

export default defineComponent((vars) => {
  return {
    displayName: 'Login',
    components: {
    },
    data() {
      return {
      };
    }
  };
});
</script>

<template>
  <main>
    ...
  </main>
</template>

已尝试在package.json中添加resolutions配置，将vue-loader版本调整为15、16、17，但均未解决问题。

这个错误源于组件样式解析环节的兼容性异常，结合你的环境，可按以下步骤修复：

• 补充组件样式块：你的page.vue缺少<style>块，部分Vue CLI插件（如Tailwind集成）可能默认期望组件包含样式定义。尝试添加空样式块测试：

  <style scoped>
  /* 空样式占位 */
  </style>
  

• 同步Vue与CLI版本：Vue CLI 5.x最高适配Vue 3.2.x，你实际安装的Vue 3.5会与内部依赖（如vue-loader）产生冲突。将package.json中vue版本改回^3.2.13，执行npm install重新安装依赖后再构建。

• 降级Tailwind版本：Tailwind 3.4.x与Vue CLI 5.x存在适配问题，执行命令降级到兼容版本：

  npm install tailwindcss@^3.3.0
  

  同时检查tailwind.config.js，确保配置无逻辑错误。

• 清理缓存后重建：执行以下命令彻底清理依赖和缓存：

  rm -rf node_modules package-lock.json
  npm install
  rm -rf dist # 手动删除构建产物目录
  vue-cli-service build --target lib --name login mod/login/Component/page.vue
  

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