为Vue 2项目添加Nuxt SSR时遇vue-loader构建失败问题求助

为现有Vue 2项目添加Nuxt SSR功能时，遇到构建失败，错误信息如下：

Module build failed (from ./node_modules/vue-loader/dist/index.js):                                                                                                                                                                                                                           friendly-errors 15:42:31
TypeError: Cannot read property 'styles' of undefined
    at Object.loader (/home/<name>/Documents/<project>/node_modules/vue-loader/dist/index.js:70:34)
                                                                                                                                                                                                                                                                                              friendly-errors 15:42:31
 @ ./.nuxt/index.js 26:0-52 312:0-32
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js ./node_modules/webpack-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

已尝试删除node_modules文件夹并执行yarn install，但问题仍未解决。项目的package.json依赖信息如下：

"@nuxt/core": "^2.15.7",
"@nuxtjs/robots": "^2.5.0",
"@nuxtjs/sitemap": "^2.4.0",
"axios": "^0.21.1",
"bootstrap": "^4.4.1",
"bootstrap-vue": "^2.23.1",
"core-js": "^3.6.5",
"emittery": "^0.11.0",
"express": "^4.17.1",
"firebase": "^7.17.1",
"jspdf": "^2.5.1",
"jspdf-autotable": "^3.5.25",
"moment": "^2.27.0",
"moment-timezone": "^0.5.31",
"node-sass": "^7.0.1",
"nuxt": "^2.15.7",
"nuxt-start": "^2.15.8",
"on-screen-keyboard-detector": "^2.3.0",
"raw-loader": "^4.0.2",
"register-service-worker": "^1.7.1",
"string-format-validation": "^2.0.2",
"sweetalert": "^2.1.2",
"v-calendar": "^2.4.1",
"validator": "^13.1.1",
"vue": "^2.7.5",
"vue-barcode-reader": "^0.0.3",
"vue-directive-long-press": "^1.1.0",
"vue-form-generator": "^2.3.4",
"vue-i18n": "^8.22.0",
"vue-js-toggle-button": "^1.3.3",
"vue-material-design-ripple": "^1.0.0",
"vue-meta": "^2.4.0",
"vue-qrcode-reader": "^3.0.1",
"vue-router": "^3.1.6",
"vue-select": "^3.11.2",
"vue-server-renderer": "2.7.14",
"vue-simple-alert": "^1.1.1",
"vue-template-compiler": "^2.6.14",
"vuejs-datepicker": "^1.6.2",
"vuex": "^3.2.0"

解决方案 #

• 统一Vue核心包版本：Nuxt 2.x要求vue、vue-template-compiler、vue-server-renderer三者版本完全一致。当前依赖中三者版本不匹配，建议统一升级到2.7.x系列，修改package.json后执行yarn install：

  "vue": "^2.7.14",
  "vue-template-compiler": "^2.7.14",
  "vue-server-renderer": "^2.7.14"
  

• 锁定vue-loader兼容版本：Nuxt 2.15.7适配的vue-loader版本为15.x，避免版本冲突。在package.json中添加锁定：

  "vue-loader": "^15.9.8"
  

  执行yarn install更新依赖。

• 彻底清理缓存与依赖：

  • 删除项目根目录下的.nuxt文件夹
  • 删除yarn.lock文件
  • 执行yarn cache clean清除yarn缓存
  • 重新执行yarn install和yarn dev

• 检查Vue组件语法：排查项目中所有.vue文件，确保没有语法错误（如style标签未闭合、script导出异常等），这类错误也可能触发vue-loader的解析失败。

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