Vue 3.5 + Webpack 5.95 语法错误：TypeError：无法读取未定义的属性（读取“样式”）

Question

我正在尝试使用以下命令构建库，但出现错误“语法错误：类型错误：无法读取未定义的属性（读取“样式”）”：

$ 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", // installed 3.5
        "vue-i18n": "^10.0.4",
        "vue-router": "^4.4.5"
        // derived dependencies
        // [email protected]
        // [email protected]
    },
...
}

page.vue：

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

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

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

我尝试将 package.json 分辨率添加到 vue-loader 15、16、17，但没有成功。

Answer 1

发现问题了。合乎逻辑，虽然不太容易发现。

我运行的命令是：

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

...它使用了全局安装的 vue-cli-service （按照此处的说明 https://cli.vuejs.org/guide/installation.html），该版本与 package.json 中的版本不同，并且反过来又安装了自己版本的 webpack 等

我应该跑：

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

摘自package.json：

"scripts": {
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
},

卸载了全局 vue-cli-service 以避免将来出现混乱。

希望这可以为某人节省时间。