Vue 疑难杂症问题收录

一平米

已于 2022-09-08 15:08:15 修改

阅读量786

点赞数 2

分类专栏： vue 文章标签： vue.js javascript 前端

于 2022-07-26 07:17:05 首次发布

本文链接：https://blog.csdn.net/pymxb1991/article/details/125986686

版权

vue 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

文章目录

1、vue inspect > output.js 报错问题

事故原因：
- 在学习Vue的时候，想看一下Vue 脚手架的默认配置，
  - 了解一下为啥页面就是要放在public/index.html;
  - 为啥入口文件是main.js
- 所以想使用 vue inspect > output.js 输出脚手架的默认配置到 output.js 中，但是……

事故现场：

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
    示例图：
- 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
事故注意：
- 按照官方方法安装可能会引发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 直到安装完成
- 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 查看版本
- 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
- 6、node、npm配置环境变量
  - 将npm 配置的全局路径配置到环境变量中去 :
  - 此电脑 -> 属性 -> 高级系统设置 -> 环境变量 -> 系统变量 -> path
  - 先配置NODE_HOME:如下图
  - 再把node、npm 全局路径都配置到path 中
- 7、node 其它版本的安装
  - nvm install 18.7.0
- 8、node 其它版本的安装成功，切换也成功，
- 9、使用当前最新版本18.7.0 node 安装Vue 脚手架
  - npm install -g @vue/cli
事故完美解决