我的 vue 档打不开，我应该如何解决

悬赏园豆：200 [待解决问题]

npm run dev 启动专案，但好像版本不符无法开启，页面会出现Cannot GET /
这是以下报错内容:

PS C:\Users\ASUS\Desktop\價衾VUE腕恀橙覃脤\砐醴埭鎢\Questionnaire-management> npm run dev

questionnaire-management@1.0.0 dev
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

(node:18132) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use node --trace-deprecation ... to show where the warning was created)
(node:18132) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
13% building modules 32/35 modules 3 active ...\Questionnaire-management\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
94% asset optimization

ERROR Failed to compile with 5 errors 下午3:11:12
error in ./src/components/Fill.vue

Module build failed: Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (115)
For more information on which environments are supported please see:
https://github.com/sass/node-sass/releases/tag/v4.14.1
at module.exports (C:\Users\ASUS\Desktop\價衾VUE腕恀橙覃脤\砐醴埭鎢\Questionnaire-management\node_modules\node-sass\lib\binding.js:13:13)
at Object.<anonymous> (C:\Users\ASUS\Desktop\價衾VUE腕恀橙覃脤\砐醴埭鎢\Questionnaire-management\node_modules\node-sass\lib\index.js:14:35)
at Module._compile (node:internal/modules/cjs/loader:1369:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
at Module.load (node:internal/modules/cjs/loader:1206:32)
at Module._load (node:internal/modules/cjs/loader:1022:12)
at Module.require (node:internal/modules/cjs/loader:1231:19)
at require (node:internal/modules/helpers:179:18)
at Object.<anonymous> (C:\Users\ASUS\Desktop\價衾VUE腕恀橙覃脤\砐醴埭鎢\Questionnaire-management\node_modules\sass-loader\lib\loader.js:3:14)
at Module._compile (node:internal/modules/cjs/loader:1369:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
at Module.load (node:internal/modules/cjs/loader:1206:32)
at Module._load (node:internal/modules/cjs/loader:1022:12)
at Module.require (node:internal/modules/cjs/loader:1231:19)
at require (node:internal/modules/helpers:179:18)
at loadLoader (C:\Users\ASUS\Desktop\價衾VUE腕恀橙覃脤\砐醴埭鎢\Questionnaire-management\node_modules\loader-runner\lib\loadLoader.js:18:17)

@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-aabbaf9a","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Fill.vue 4:14-371 13:3-17:5 14:22-379
@ ./src/components/Fill.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

error in ./src/components/List.vue

@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-264bddce","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/List.vue 4:14-371 13:3-17:5 14:22-379
@ ./src/components/List.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

error in ./src/components/Datepicker.vue

@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-3576d9ec","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Datepicker.vue 4:14-377 13:3-17:5 14:22-385
@ ./src/components/Datepicker.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

error in ./src/components/Data.vue

@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-40b9b6da","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Data.vue 4:14-371 13:3-17:5 14:22-379
@ ./src/components/Data.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

error in ./src/components/Edit.vue

@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-3594053a","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Edit.vue 4:14-371 13:3-17:5 14:22-379
@ ./src/components/Edit.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

vue js scss node.js

愛吉筠 | 初学一级 | 园豆：2
提问于：2024-06-13 15:15

< >

所有回答(4)

Node Sass does not yet support your current environment, 你尝试把node sass卸载再重新安装试试

www378660084 | 园豆：1141 (小虾三级) | 2024-06-13 15:26

项目是从别处拷贝来的？先把 dist, node_modules 两个目录删除，再执行 npm install 试试。

快乐的欧阳天美1114 | 园豆：4004 (老鸟四级) | 2024-06-13 15:47

你的问题是由于 node-sass 与当前的 Node.js 版本不兼容导致的。node-sass 通常会对特定的 Node.js 版本有要求，所以在更新 Node.js 之后需要更新 node-sass。

这里是一些解决办法：

使用 sass 替代 node-sass
node-sass 已经被弃用，推荐使用 sass (dart-sass) 作为替代。你可以在项目中将 node-sass 替换为 sass：

卸载 node-sass:

bash
Copy code
npm uninstall node-sass
安装 sass:

bash
Copy code
npm install sass
更新你的项目配置：
如果你在 webpack 配置或其他地方直接引用了 node-sass，需要将其改为 sass。通常这一步可以跳过，因为 sass-loader 会自动选择合适的实现。

更新 node-sass 版本
如果你想继续使用 node-sass，你需要确保它的版本与当前的 Node.js 版本兼容。根据你的错误信息，可能需要安装较新的 node-sass 版本：

找到与当前 Node.js 版本兼容的 node-sass 版本：
你可以参考 node-sass releases 页面来找到合适的版本。

更新 node-sass:

bash
Copy code
npm install node-sass@latest
3. 检查 Node.js 版本
确保你的 Node.js 版本与项目中的依赖项兼容。你可以通过以下命令查看当前的 Node.js 版本：

bash
Copy code
node -v
如果你的 Node.js 版本过新，可能需要降级到与 node-sass 更兼容的版本。使用 nvm 来管理和切换 Node.js 版本是一个好的选择。

删除 node_modules 和 package-lock.json，重新安装依赖
有时候删除所有依赖重新安装可以解决很多奇怪的问题：

删除 node_modules 和 package-lock.json:

bash
Copy code
rm -rf node_modules package-lock.json
重新安装依赖:

bash
Copy code
npm install
5. 检查 webpack.config.js 配置
确保你的 webpack 配置正确引用了 sass-loader，并且没有特定指定 node-sass：

javascript
Copy code
module: {
rules: [
{
test: /.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
}
]
}
6. 检查 Vue 文件中的 SCSS 配置
确保你的 .vue 文件中的 style 标签正确使用 scss 预处理器：

html
Copy code
<style lang="scss">
/* SCSS 代码 */
</style>
总结
如果你按照上述步骤操作后依然有问题，请提供更多的项目配置文件（如 package.json 和 webpack.config.js），以便进一步帮助你分析问题。

Technologyforgood | 园豆：7541 (大侠五级) | 2024-06-13 16:47

过来人经验，用vite创建项目。就不会有sass这个问题了。vue cli默认用webpack，安装sass的时候和node版本不一致就会报这个错。用vite的时候，语法简洁，功能强大。

顾星河 | 园豆：7281 (大侠五级) | 2024-06-19 21:49

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。

我的 vue 档打不开，我应该如何解决

欢迎，请先登录或者注册。