Vue 疑难杂症问题收录

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
      

• 事故完美解决

6、安装 老版本node 找不到对应的 下载包如何解决

• 事故原因

  • 运行以前的代码使用的node 是14.17.5的版本，但是现在nvm 安装时nvm 版本库中找不到旧版的 node 版本；

• 事故现场

  • 

• 事故解决

  • 手动下载node 14.17.5 关联nvm

• node 下载地址
  - https://nodejs.org/dist/
  1、手动下载对应版本的 node
  
  

2、找到下载的文件，同时找到nvm 安装目录，创建对应的版本文件夹，将下载的文件解压到目录里面，如下

3、进入 cmd 命令中 查看 nvm 下当前安装版本

nvm list

然后使用手动关联

nvm use 14.17.5