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

一、在执行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中