vue学习笔记——node-sass安装的各种坑

news/2024/7/10 1:06:37 标签: vue

一、在执行npm run dev时遇到“Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (83)”错误。

在这里插入图片描述
按提示信息应该是Node-sass版本在当前环境运行不了,查阅后采用网上的解决方法,把Node-sass删除再重装:
1.卸载当前版本node sass

npm uninstall --save node-sass

2.重新安装node sass

npm install --save node-sass

二、 接着再执行npm run dev又报错“Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.”

在这里插入图片描述
即该node-sass版本太高,而ass-loader期望值为^4.0.0,所以报错。

因此又删了node-sass再次重装低版本的:

npm install node-sass@4.12.x -D

三、但是安装该版本的node-sass又报错“Error: Can’t find Python executable “python”, you can set the PYTHON env variable.”

在这里插入图片描述
错误原因:Node.js 在安装模块的时候报错,缺少python环境。
解决方法:
安装windows-build-tools

npm install --global --production windows-build-tools

安装node-gyp

npm install --global node-gyp

四、安装windows-build-tools的过程中又报错”Please restart this script from an administrative PowerShell!“

在这里插入图片描述
解决方法:
以管理员身份运行cmd
接着再运行

npm install --global node-gyp

在这里插入图片描述
安装成功!

五、再次安装4.12.x版本的node-sass

npm install node-sass@4.12.x -D

在这里插入图片描述
执行npm list --depth=0这个指令可以用来 显示 出我们的项目中安装了哪些模块(–depth 表示深度,我们使用的模块会有依赖,深度为零的时候,不会显示依赖模块)
npm 查看安装了哪些包的相关指令
在这里插入图片描述
安装成功

六、重新运行npm run dev

在这里插入图片描述
终于无报错成功执行!!
在这里插入图片描述
网页也可访问

总结:npm run dev启动过程

npm run *** 是执行配置在package.json中的脚本,比如:

npm run dev 执行的就是webpack-dev-server --inline --hot–port 8088 命令。
在这里插入图片描述
2. webpack.dev.conf文件通过merge引用了webpack.conf.js文件。
3. 在webpack.conf.js文件中调用了main.js
4. main.js用到了一个html元素#app,并创建了一个vue
5. 创建的vue会插入到webpack.conf.js配置中HtmlWebpackPlugin配置的文件中
6. main.js中配置了router-view,router-view会加载HelloWorld.vue并插入到index.html中


http://www.niftyadmin.cn/n/1267724.html

相关文章

Leetcode 1259:不相交的握手(超详细的解法!!!)

偶数 个人站成一个圆,总人数为 num_people 。每个人与除自己外的一个人握手,所以总共会有 num_people / 2 次握手。 将握手的人之间连线,请你返回连线不会相交的握手方案数。 由于结果可能会很大,请你返回答案 模 10^97 后的结果…

Vue路由---vue-router相关概念

一、请简述npm方式安装vue-router的步骤。 1.首先通过cd命令进入创建好的项目目录里面 cd 文件名 2.使用以下npm命令来安装路由 方式一:npm install vue-router --save(不加版本号) // --save 会在package.json包配置文件中添加对应的配置 …

Leetcode 1260:二维网格迁移(超详细的解法!!!)

给你一个 n 行 m 列的二维网格 grid 和一个整数 k。你需要将 grid 迁移 k 次。 每次「迁移」操作将会引发下述活动: 位于 grid[i][j] 的元素将会移动到 grid[i][j 1]。位于 grid[i][m - 1] 的元素将会移动到 grid[i 1][0]。位于 grid[n - 1][m - 1] 的元素将会移…

JS学习笔记:箭头函数 =>

解释:http://t.zoukankan.com/wangtong111-p-11307231.html 进阶:https://juejin.im/post/5be599d4e51d451d23633ec8

Leetcode 1261:在受污染的二叉树中查找元素(超详细的解法!!!)

给出一个满足下述规则的二叉树: root.val 0如果 treeNode.val x 且 treeNode.left ! null,那么 treeNode.left.val 2 * x 1如果 treeNode.val x 且 treeNode.right ! null,那么 treeNode.right.val 2 * x 2 现在这个二叉树受到「污染…

vue.$slots--插槽使用

插槽&#xff1a;组件中的组件 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><script src"vue.js"></script></head><body><div id"app"><blog-po…

Javascript基础之-var,let和const深入解析

Javascript基础之-var&#xff0c;let和const深入解析&#xff08;一&#xff09; Javascript基础之-var&#xff0c;let和const深入解析&#xff08;二&#xff09;

Leetcode 1262:可被三整除的最大和(超详细的解法!!!)

给你一个整数数组 nums&#xff0c;请你找出并返回能被三整除的元素最大和。 示例 1&#xff1a; 输入&#xff1a;nums [3,6,5,1,8] 输出&#xff1a;18 解释&#xff1a;选出数字 3, 6, 1 和 8&#xff0c;它们的和是 18&#xff08;可被 3 整除的最大和&#xff09;。示例…