为什么这个小节开始源码下载来会打开不了

Question

因为普通的逻辑我不需要学习，我就跳过到这个小节的代码，然后下载下来后npm run install,运行npm run dev:ssr后，client端只有出现一个undefined，但是server端渲染是正常的，而且运行会出现

Deprecation Warning: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

@import “@/assets/scss/home/index.scss”;

的警告，是我node版本的问题吗难道？

Answer 1

提问者 呵呵小学生 2024-12-07 18:11:55

贴图在这里

• Harry_wang #1

  浏览器控制台报错有吗，贴出来看下

• 提问者 呵呵小学生 回复 Harry_wang #2

  回复 Harry_wang：贴图更新了

• Harry_wang 回复 提问者 呵呵小学生 #3

  看截图，已经找到问题了，最后一张截图的[Vue Warn]里显示：
  <div id="app" style="diplay:none;z-index:2001" >，所以导致页面白屏不显示。
  这个是因为element-plus的<el-menu>组件不支持ssr导致，以前是不会强制加这个行内样式的，但是现在它强制加上了这个display:none的样式。
  
  解决方案是：
  在用到<el-menu>组件的地方，也就是commonHeader.vue文件中的<el-menu>组件外包裹一个<client-only></client-only>即可

点开查看后面3条评论

Answer 2

Harry_wang 2024-12-05 15:40:41

node版本最好和课程保持一致版本，然后再安装相关依赖哈，你的sass版本应该是太高了，最好和课程中的一拉都保持一致，这样报错就会很少了

• 提问者 呵呵小学生 #1

  我用16.11.0去install直接就报错了，然后我用14.21.3去install，是成功的但是会报sass的错，而且打开还是client端只有一个undefined

• Harry_wang 回复 提问者 呵呵小学生 #2

  1. 报sass的错如何处理：你看下node_modules中安装的sass版本，应该和项目中package.json中的不一致，确保版本是1.45.1
  2. client端只有一个undefined：直接拉dev-11.15分支代码，有解决这个问题，出现undefined是因为preloadLinks没有赋值默认值

• 提问者 呵呵小学生 回复 Harry_wang #3

  回复 Harry_wang：查了一下node_modules确定sass版本是1.45.1
  "_from": "sass@^1.45.1",
    "_id": "sass@1.82.0",
    "_inBundle": false,
    "_integrity": "sha512-j4GMCTa8elGyN9A7x7bEglx0VgSpNUG4W4wNedQ33wSMdnkqQCT8HTwOaVSV4e6yQovcu/3Oc4coJP/l0xhL2Q==",
    "_location": "/sass",
    "_phantomChildren": {},
    "_requested": {
      "type": "range",
      "registry": true,
      "raw": "sass@^1.45.1",
      "name": "sass",
      "escapedName": "sass",
      "rawSpec": "^1.45.1",
      "saveSpec": null,
      "fetchSpec": "^1.45.1"
    },
  然后我拉了dev-11.15代码，先install，然后npm run build:ssr，然后node server，依然没有解决这个问题，client端一片空白

点开查看后面2条评论