文章目录
1、vue inspect > output.js 报错问题
- 事故原因:
- 在学习Vue的时候,想看一下Vue 脚手架的默认配置,
- 了解一下为啥页面就是要放在public/index.html;
- 为啥入口文件是main.js
- 所以想使用
vue inspect > output.js
输出脚手架的默认配置到 output.js 中,但是……
- 在学习Vue的时候,想看一下Vue 脚手架的默认配置,
- 事故现场:
vue : 无法加载文件 G:\Program Files\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚 本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Executi on_Policies。 所在位置 行:1 字符: 1 系统上禁止运行脚 本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Executi on_Policies。 所在位置 行:1 字符: 1 + vue inspect > output.js + ~~~ + CategoryInfo : SecurityError: (:) [],PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess
- 事故解决
-
1、首先打开PowerShell 窗口: 注意:需要以
管理员的身份运行PowerShell
- 查看shell的当前执行策略:
- 执行命令:
get-ExecutionPolicy
,
- 执行命令:
-
- 收到响应:
Restricted
,表示状态是受限制的
- 收到响应:
- 设置shell的执行策略:
- 执行命令:
set-ExecutionPolicy RemoteSigned
- 收到响应:输入
Y
示例图:
- 查看shell的当前执行策略:
-
2、回到VsCode 去执行 :
vue inspect > output.js
生成 output.js
-
- 事故完美处理完了
2、vue npm i less-loader 后报错问题
- 事故原因
- 安装的 less-loader 的时候没有安装less ,导致项目起不来引发事故……
- 事故现场:
App runnin ERROR Failed to compile with 1 error 上午6:25:14 error in ./src/components/School.vue?vue&type=style&index=0&id=3375b0b8&lang=less&scoped=true& at Syntax Error: Error: The Less implementation "undefined" not found ERROR in ./src/components/School.vue?vue&type=style&index=0&id=3375b0b8&lang=less&scoped=true& (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/School.vue?vue&type=style&index=0&id=3375b0b8&lang=less&scoped=true&) Module Error (from ./node_modules/less-loader/dist/cjs.js): Cannot find module 'less' Require stack: - E:\project\VUE\vue_test\node_modules\less-loader\dist\utils.js - E:\project\VUE\vue_test\node_modules\less-loader\dist\index.js - E:\project\VUE\vue_test\node_modules\less-loader\dist\cjs.js - E:\project\VUE\vue_test\node_modules\webpack\lib\ProgressPlugin.js - E:\project\VUE\vue_test\node_modules\progress-webpack-plugin\index.js - E:\project\VUE\vue_test\node_modules\@vue\cli-service\lib\commands\serve.js - E:\project\VUE\vue_test\node_modules\@vue\cli-service\lib\Service.js - E:\project\VUE\vue_test\node_modules\@vue\cli-service\bin\vue-cli-service.js @ ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/School.vue?vue&type=style&index=0&id=3375b0b8&lang=less&scoped=true& 4:14-445 15:3-20:5 16:22-453 @ ./src/components/School.vue?vue&type=style&index=0&id=3375b0b8&lang=less&scoped=true& 1:0-506 1:0-506 @ ./src/components/School.vue 4:0-91 @ ./src/App.vue?vue&type=script&lang=js& 1:0-191 1:207-210 1:212-400 1:212-400 ex.js??vue-loader-option @ ./src/App.vue 2:0-55 3:0-50 3:0-50 9:2-8 @ ./src/main.js 8:0-28 14:13-16 ERROR in ./src/components/School.vue?vue&type=style&index=0&id=3375b0b8&lang=less&scoped=true& (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??ccss-loader/dist/cjs.js??lonedRuleSet-32.use[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/Schs-loader/dist/cjs.js??clool.vue?vue&type=style&index=0&id=3375b0b8&lang=less&scoped=true&) oader-v15/lib/index.js?? Module build failed (from ./node_modules/less-loader/dist/cjs.js): Error: The Less implementation "undefined" not found at Object.lessLoader (E:\project\VUE\vue_test\node_modules\less-loader\dist\index.js:24:14) @ ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-lnedRuleSet-32.use[1]!./noader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./nodRuleSet-32.use[2]!./nodde_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/School.vue?vue&type=style&inde-loader-options!./src/cox=0&id=3375b0b8&lang=less&scoped=true& 4:14-445 15:3-20:5 16:22-453 @ ./src/components/School.vue?vue&type=style&index=0&id=3375b0b8&lang=less&scoped=true& 1:0-506 1:0-506 @ ./src/components/School.vue 4:0-91 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-optionex.js??vue-loader-options!./src/App.vue?vue&type=script&lang=js& 2:0-45 7:12-18 @ ./src/App.vue?vue&type=script&lang=js& 1:0-191 1:207-210 1:212-400 1:212-400 @ ./src/App.vue 2:0-55 3:0-50 3:0-50 9:2-8 @ ./src/main.js 8:0-28 14:13-16 webpack compiled with 2 errors
- 事故解决
- 解决办法:安装 less
- 1、直接用官网命令less 和less-loader (重装一遍):
npm install less less-loader --save-dev
- 2、直接装 less :
npm install less --save-dev
- 1、直接用官网命令less 和less-loader (重装一遍):
- 解决办法:安装 less
- 事故注意:
- 按照官方方法安装可能会引发less-loader版本太高导致冲突的问题,此时需要除底版本号
- 解决办法:降低版本号
- 卸载旧版本:
npm uninstall less-loader
- 安装新版本:
npm install less-loader@x.x.x
(x.x.x 表示指定的版本号)
- 卸载旧版本:
- 事故完美处理完了
4、vue 安装插件遇到版本号引出的冲突问题如果去处理
- 事故原因
- 找不到对应的版本号,导致项目启动不了
- 事故现场
- 被人为破坏了,现记录一下遇到此类问题的终级解决方法
- 事故解决
-
1、首先自己的webpack 版本号
npm view webpack version
示例图片
因为我本地的webpack 版本是最新的,所以执行官网的命令没有问题;如何查询目前webpack 的最新版本;如下命令,只需要在之前的命令之后加s
npm view webpack versions
示例图片
-
2、此处我以less-loader为例,查询版本版本的 webpack 版本
-
1、进入github 官网,输入
less-loader
-
2、找到搜索出来的
webpack-contrib/less-loader
-
3、点击进入,了解一下目前的版本,然后找到
package.json
,点击进入
-
4、进入之后,找到
peerDependencies
,
在此处即可找到对应的版本- 安装当前版本的 less-loader 最好的选择是 less 3.5.0 到4.0.0 之间 和 webpack 5.0.0
-
-
5、安装nvm node.js 版本管理引发的各种问题
- 事故原因
- 本人机器事先已经安装了node.js,然后又安装了nvm ,导致node 不能使用;
- 卸载node.js 使用nvm 安装 node.js 切换版本乱码问题
- 安装 nvm 之后,node.js npm 命令用不了问题
- 事故现场
- 被人为破坏了,现记录一下遇到此类问题的终级解决方法
- 事故解决
-
nvm-windows下载地址: nvm-windows
-
1、安装nvm
- setup 1
- setup 2 配置nodejs 全局安装目录
- setup 3 next 然后install 直到安装完成
- setup 1
-
2、nvm 相关命令
nvm off // 禁用node.js版本管理(不卸载任何东西) nvm on // 启用node.js版本管理 nvm install <version> // 安装node.js的命名 version是版本号 例如:nvm install 8.12.0 nvm uninstall <version> // 卸载node.js是的命令,卸载指定版本的nodejs,当安装失败时卸载使用 nvm ls // 显示所有安装的node.js版本 nvm list //显示本地已经安装的node版本列表 nvm list available // 显示可以安装的所有node.js的版本 nvm use <version> // 切换到使用指定的nodejs版本 nvm install latest //安装最新版本的node
- nvm 查看版本
- nvm 查看版本
-
2、nvm配置淘宝镜像地址: 进入nvm安装目录,找到settings,添加如下两行代码即可;
node_mirror: https://npm.taobao.org/mirrors/node/ npm_mirror: https://npm.taobao.org/mirrors/npm/
-
3、安装node 第一个版本,如下图
- 安装完之后,应用14.17.5;
- 注意:默认安装完之后,nvm 是没有应用当前版本的,即使一个node版本也没有安装也不会应用,所以必须应用才可以使用
-
4、npm 统一的全局模块安装路径的配置
- 修改npm的包的全局安装路径:
npm config set prefix "G:\ToolProgramFiles\nodejs\node_global"
- 修改npm的包的全局cache位置:
npm config set cache "G:\ToolProgramFiles\nodejs\node_cache"
- 将npm设置为淘宝镜像:npm config set registry https://registry.npm.taobao.org
查看配置效果:npm config list
- 修改npm的包的全局安装路径:
-
6、node、npm配置环境变量
- 将npm 配置的全局路径配置到 环境变量中去 :
- 此电脑 -> 属性 -> 高级系统设置 -> 环境变量 -> 系统变量 -> path
- 先配置NODE_HOME:如下图
- 再把node、npm 全局路径都配置到path 中
-
7、node 其它版本的安装
- nvm install 18.7.0
- nvm install 18.7.0
-
8、node 其它版本的安装成功,切换也成功,
-
9、使用当前最新版本18.7.0 node 安装Vue 脚手架
- npm install -g @vue/cli
- npm install -g @vue/cli
-
- 事故完美解决