Vue学习--- vue3 集成遇到的部分问题与解决

server/2024/12/22 20:40:25/

构建异常

1. 问题：ESLint: Do not access Object.prototype method 'hasOwnProperty' from target o

报错解释：

ESLint 报错信息 "Do not access Object.prototype method 'hasOwnProperty' from target object" 指的是不应该从目标对象访问 Object.prototype 上的 

hasOwnProperty 方法。这是因为 

hasOwnProperty 是用来检查一个对象是否具有特定的自身属性，而不是继承自原型链的属性。如果不正确地使用，可能会导致意外行为或错误。

解决方法：

示例代码：

javascript">// 错误的使用方式
const obj = { hasOwnProperty: "test", prop: "value" };
if (obj.hasOwnProperty("prop")) { // 可能会意外触发obj自身的hasOwnProperty属性// ...
}// 正确的使用方式
const obj = { prop: "value" };
if (obj.hasOwnProperty("prop")) { // 安全地使用Object.prototype的方法// ...
}// 或者使用call方法
if (Object.prototype.hasOwnProperty.call(obj, "prop")) { // 确保安全// ...
}

2. 问题 ESLint: 'oldVal' is defined but never used. (no-unused-vars)

例如：

解决办法：

javascript">// eslint-disable-next-line no-unused-vars

3.问题 vue2 @keyup.enter.native 报错 vue3 使用报错

vue3 使用

javascript">@keyup.enter

4.问题 vue2 slot-scope vue3 报错

vue2 slot-scope="scope" vue3 #default="scope"

5.问题 vue2 solt vue3 报错

slot-scope 主要也是配合 slot 一块使用，在 2.x 版本中都是支持的，但 vue 3 中已经被官方废弃了。

vue 2.6.0 中引入，为具名插槽和作用域插槽提供新的统一的语法 v-slot 指令，用来代替 slot 和 slot-scope

v-slot:default 可以简写为 v-slot，或者使用 # 作为缩写。例如， 或 。

报错`slot` attributes are deprecated

解决方法

<template #title></template>
<template #title="{scope}"></template>

6. 问题 vue3 vue 组件 name 报错

javascript">export default {name: "Index"
}
解决办法
export default {// eslint-disable-next-line vue/multi-word-component-namesname: "Index"}

7.问题 vue2 @click.native.prevent vue3 报错

你应该直接在模板中使用@click.prevent来阻止默认事件

在Vue 3中，由于移除了.native修饰符，所以不再需要使用.native.prevent

vue2

<button v-on:click.native.prevent="doSomething">Click me</button>

vue3

<button @click.prevent="doSomething">Click me</button>

8.问题 vue2 @click.native vue3 报错

vue2 
<MyComponent @click.native="handleClick" />
vue3
<MyComponent @click="handleClick" />

9.问题 vue2 beforeDestroy() vue3报错

在Vue 2中，你可以使用 beforeDestroy 钩子来执行组件销毁前的清理工作。但在Vue 3中，应当使用 beforeUnmount。

10. 问题 vue2 @wheel.native.prevent vue3 报错

在Vue 3中，由于事件修饰符的变化，@wheel.native.prevent 已不再被直接支持。在Vue 2中，.native 修饰符用于监听组件根元素的原生事件，而 
.prevent 修饰符用于调用事件的 preventDefault 方法。
Vue 2中这样使用：
<my-component @wheel.native.prevent="handleWheel"></my-component>
vue3 
<my-component @wheel="handleWheel"></my-component>

javascript">setup() {const handleWheel = (event) => {event.preventDefault();// 其他逻辑};return {handleWheel};
}

11.问题 vue2 solt 替换成 v-solt:= 报错 Vue: v-slot can only be used on components or tags.

错误源：

<template><div class="app-container"><el-row :gutter="20"><el-col :span="6" :xs="24"><el-card class="box-card"><div v-slot:="header" class="clearfix"><span>个人信息</span></div>

解释：

这个错误表明你在尝试使用 v-slot 指令，但是错误地将它用在了一个不支持插槽的元素上。在Vue中，v-slot 只能用在组件标签上或者 

 标签内，用来提供插槽内容。

解决方法：

确保你在正确的元素上使用 v-slot。如果你在模板中需要使用插槽，请确保你是在一个组件标签内部或者一个包含 

 的  标签内部使用 v-slot。

javascript"><MyComponent><template v-slot:my-slot><!-- 插槽内容 --></template>
</MyComponent>

或者如果你使用的是单个插槽的简写形式，可以直接使用 # 代替 v-slot:：

javascript"><MyComponent><template #my-slot><!-- 插槽内容 --></template>
</MyComponent>

如果你在一个不支持插槽的元素上使用了 

v-slot，比如普通的 div 或者 p 标签，你需要移除 

v-slot，并确保你的内容直接作为子元素或者通过其他方式传递给组件。

解决例子：

<template  v-slot:header><div class="clearfix"><span>基本资料</span></div>
</template>

12.问题 Module not found: Error: Can't resolve 'fuse.js/dist/fuse.min.js' in 'D:\WEBSTORM_WORKSPACE\hello-vue\web-site\src\components\HeaderSearch'

重建项目 安装模糊查询模块

npm install --force fuse.js

然后引用

13.问题 Module not found: Error: Can't resolve 'screenfull' in 'D:\WEBSTORM_WORKSPACE\hello-vue\web-site\src\components\Screenfull'

VUE3中实现浏览器全屏功能 screenfull

npm install screenfull

npm install screenfull --force

import screenfull from 'screenfull'

14.问题 Module not found: Error: Can't resolve 'js-cookie' in 'D:\WEBSTORM_WORKSPACE\hello-vue\web-site\src\views'

报错解释：

这个错误表明在尝试构建一个JavaScript应用程序时，构建工具（如Webpack）无法在指定路径下找到

js-cookie库。这通常是因为

js-cookie没有正确安装或者构建配置不正确。

解决方法：

确认js-cookie是否已经安装。如果没有安装，需要使用npm或yarn进行安装：

javascript">npm install js-cookie

15.问题 Module not found: Error: Can't resolve 'vue-cropper' in 'D:\WEBSTORM_WORKSPACE\hello-vue\web-site\src\views\system\user\profile'

解释：

这个错误表明在尝试构建一个Vue 3项目时，构建工具（如Webpack）无法解析或找到vue-cropper模块。这通常是因为

vue-cropper没有被正确安装或者在项目中的配置文件中没有正确引用。

解决方法：

确认vue-cropper是否已经通过npm或yarn安装。如果没有安装，运行以下命令进行安装：

javascript">npm install vue-cropper --save
npm install vue-cropper --force

如果已经安装，检查你的项目中的import语句是否正确。应该类似于：

javascript">import VueCropper from 'vue-cropper'

清除：

javascript">npm cache clean --force
rm -rf node_modules
npm install

16问题 以上问题，安装后直接修改 package.json dependencies然后 update dependencies

16.问题 Module not found: Error: Can't resolve 'path' in 'D:\WEBSTORM_WORKSPACE\hello-vue\web-site\src\components\HeaderSearch'

安装依赖

npm install path-browserify

javascript">import path from 'path-browserify';
export default {setup() {const normalizedPath = path.normalize('/foo/bar//baz/asdf/quux/..');console.log(normalizedPath); // 输出: '/foo/bar/baz/asdf'// 使用path-browserify的其他功能...}
};

解决方法：

确保您的项目中已经安装了path模块。如果没有安装，请运行以下命令来安装它：

npm install path

import path from 'path';

  1. 如果您是在Node.js环境中工作，确保您没有在项目的

package.json文件中错误地添加了一个依赖项叫做path，这可能会导致模块解析问题。

如果以上步骤都不适用，您可能需要检查您的项目配置文件，如

webpack.config.js或vue.config.js，以确保它们没有错误地影响模块解析。

17.问题 Vue: Extraneous children found when component already has explicitly named default slot. These children will be ignored.

 

18.问题 Failed to resolve loader: sass-loader

解决添加依赖 package.json

"sass-loader": "^16.0.0"

更新：node_modules

当前项目：npm install

19.问题：vue3 Syntax Error: Error: Cannot find module 'sass'

报错解释：

这个错误表明在使用Vue 3框架时，尝试导入或使用Sass（一种CSS预处理器）时，系统无法找到对应的模块。这通常发生在使用Vue CLI创建的项目中，当项目配置需要Sass来处理样式文件时。

解决方法：

安装Sass依赖：

npm install sass

更新：node_modules

当前项目：npm install

20. 问题： 测试生产环境配置后 compression-webpack-plugin 引用异常

javascript"> ERROR  ValidationError: Invalid options object. Compression Plugin has been initialized using an options object that does not match the API schema.- options has an unknown property 'cache'. These properties are valid:object { test?, include?, exclude?, algorithm?, compressionOptions?, threshold?, minRatio?, deleteOriginalAssets?, filename? }
ValidationError: Invalid options object. Compression Plugin has been initialized using an options object that does not match the API schema.- options has an unknown property 'cache'. These properties are valid:object { test?, include?, exclude?, algorithm?, compressionOptions?, threshold?, minRatio?, deleteOriginalAssets?, filename? }

问题描述：

这个错误信息表明你在使用 Webpack 的 Compression Plugin 时，配置了一个不被该插件接受的属性 

cache。Compression Plugin 的 API 架构中没有 cache 这个选项，因此当你尝试在配置中包含它时，Webpack 会抛出一个 ValidationError。

要解决这个问题，你需要从 Compression Plugin 的配置中移除 

cache 属性，或者如果你确实需要缓存功能，你可能需要寻找其他插件或方法来实现它。以下是一个基本的 Compression Plugin 配置示例，你可以根据自己的需求进行调整：

如果你之前使用 cache 是为了优化构建性能，你可能需要查看 Webpack 的其他配置选项或插件，如 cache-loader 或利用 Webpack 自身的缓存机制。Webpack 4 和更高版本已经内置了缓存支持，可以通过配置 cache: { type: 'filesystem' } 来启用文件系统缓存，这可以显著提高重复构建的速度。

如果你正在使用的是一个旧版本的 Compression Plugin，并且文档中提到有 cache 选项，那么你可能需要更新你的插件到最新版本，因为在新版本中可能已经移除了这个选项或改变了其用法。

解决：

21、问题：npm run build:stage Error: Cannot find module 'script-ext-html-webpack-plugin'

ERROR Error: Cannot find module 'script-ext-html-webpack-plugin'

Require stack:

- D:\WEBSTORM_WORKSPACE\hello-vue\web-site\node_modules\webpack-chain\src\Plugin.js

- D:\WEBSTORM_WORKSPACE\hello-vue\web-site\node_modules\webpack-chain\src\Resolve.js

- D:\WEBSTORM_WORKSPACE\hello-vue\web-site\node_modules\webpack-chain\src\Config.js

- D:\WEBSTORM_WORKSPACE\hello-vue\web-site\node_modules@vue\cli-service\lib\Service.js

- D:\WEBSTORM_WORKSPACE\hello-vue\web-site\node_modules@vue\cli-service\bin\vue-cli-service.js

Error: Cannot find module 'script-ext-html-webpack-plugin'

这个错误提示表明你的项目中缺少了 

script-ext-html-webpack-plugin 这个模块，但它在你的项目的某个地方被要求引用。这通常发生在以下几种情况：

  1. 依赖未安装

：script-ext-html-webpack-plugin 可能被列在了 package.json 的 dependencies 或 devDependencies 中，但实际上没有通过 npm install 或 yarn 安装。

检查 package.json

首先，检查你的 package.json 文件，查看是否有 script-ext-html-webpack-plugin 被列为依赖。

  • 如果它在那里，确保你已经运行了 npm install 或 yarn 来安装所有依赖。
  • 如果它不在那里，但你的项目确实需要这个插件，你可以通过运行 npm install script-ext-html-webpack-plugin --save-dev 或 yarn add script-ext-html-webpack-plugin --dev 来添加它。

22、问题：（npm install）npm error Found: html-webpack-plugin@5.6.0 npm error node_modules/html-webpack-plugin npm error dev html-webpack-plugin@"^5.6.0" from the root project

解决：

webpack html-webpack-plugin 版本对应

html-webpack-plugin 是一个用于通过简单的 Webpack 配置生成 HTML 文件的插件，它会为你生成一个 HTML 文件，然后自动引入你项目中所有 webpack 处理过的资源。在 Webpack 中使用 html-webpack-plugin，你需要确保 Webpack 和 html-webpack-plugin 之间的版本兼容。以下是一些常见的版本对应关系：

  • Webpack 4: 使用 html-webpack-plugin 的 3.x 版本
  • Webpack 5: 使用 html-webpack-plugin 的 4.x 版本

如果你正在使用 Webpack 4，你应该在 package.json 文件中指定 html-webpack-plugin 的 3.x 版本，如下所示：

javascript">"dependencies": {"html-webpack-plugin": "^3.2.0"
}

对于 Webpack 5，你应该使用 html-webpack-plugin 的 4.x 版本，如下所示：

javascript">"dependencies": {"html-webpack-plugin": "^4.3.0"
}

23、问题 执行 npm install 解析依赖报错

javascript">D:\nodejs\npm.cmd install
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: web-site@0.1.0
npm error Found: webpack@5.93.0
npm error node_modules/webpack
npm error   dev webpack@"^5.93.0" from the root project
npm error   peer webpack@"^4.0.0 || ^5.0.0" from html-webpack-plugin@4.5.2
npm error   node_modules/html-webpack-plugin
npm error     dev html-webpack-plugin@"^4.5.2" from the root project
npm error     peer html-webpack-plugin@"^3.0.0 || ^4.0.0" from script-ext-html-webpack-plugin@2.1.5
npm error     node_modules/script-ext-html-webpack-plugin
npm error       dev script-ext-html-webpack-plugin@"^2.1.5" from the root project
npm error
npm error Could not resolve dependency:
npm error peer webpack@"^1.0.0 || ^2.0.0 || ^3.0.0 || ^4.0.0" from script-ext-html-webpack-plugin@2.1.5
npm error node_modules/script-ext-html-webpack-plugin
npm error   dev script-ext-html-webpack-plugin@"^2.1.5" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

异常分析：

javascript">ERESOLVE unable to resolve dependency tree
peer webpack@"^4.0.0 || ^5.0.0" from html-webpack-plugin@4.5.2
peer html-webpack-plugin@"^3.0.0 || ^4.0.0" from script-ext-html-webpack-plugin@2.1.5
peer webpack@"^1.0.0 || ^2.0.0 || ^3.0.0 || ^4.0.0" from script-ext-html-webpack-plugin@2.1.5

script-ext-html-webpack-plugin 版本最新是2.1.5 反推 webpack要使用4.0.0 html-webpack-plugin 要使用4.0.0

使用文心一言的分析：

javascript">遇到的错误是由于 npm 在尝试解析项目依赖时，发现存在版本冲突。具体来说，script-ext-html-webpack-plugin@2.1.5 
需要 webpack 的版本在 ^1.0.0 到 ^4.0.0 之间，但是您的项目中已经安装了 webpack@5.93.0。

 

javascript">"webpack": "^4.0.0",
"compression-webpack-plugin": "^6.1.2",
"html-webpack-plugin": "^4.0.0",
"script-ext-html-webpack-plugin": "^2.1.5"

 

24、问题： sass-loader 依赖报错

sass-loader 的版本与多个因素相关，包括Webpack本身的版本、Node.js的版本，以及

node-sass（如果使用的是 node-sass而非 dart-sass）的版本。由于这些依赖关系，直接提供一个固定的版本对应关系可能并不完全准确，因为随着时间和软件更新的推进，最佳实践可能会发生变化。

Webpack版本与sass-loader的对应关系

  • Webpack 3.x：通常建议使用sass-loader的6.x版本。
  • Webpack 4.x：推荐使用sass-loader的7.x到10.x版本。
  • Webpack 5.x：建议匹配sass-loader的11.x到最新版本（但请注意，随着sass-loader的更新，可能需要检查其文档以确认与Webpack 5的兼容性）。


http://www.ppmy.cn/server/107871.html

相关文章

轻量级冠军：NVIDIA 发布具有领先准确率的小语言模型

轻量级冠军：NVIDIA 发布具有领先准确率的小语言模型

Mistral-NeMo-Minitron 8B 是最近发布的 Mistral NeMo 12B 模型的微型版本&#xff0c;具有高精度和高计算效率&#xff0c;可在 GPU 加速数据中心、云和工作站上运行模型。 生成式 AI 开发者通常需要在模型尺寸和准确性之间做出权衡。然而&#xff0c;NVIDIA 发布的一款新语言…
阅读更多...
Android Studio Koala下载并安装，测试helloworld.

Android Studio Koala下载并安装，测试helloworld.

1、下载&#xff1a; 下载 Android Studio 和应用工具 - Android 开发者 | Android Developers 2、滚动条拉到近最后&#xff0c;各个系统的下载地址&#xff1a; 3、下载完成以后&#xff0c;我们双击运行安装&#xff1a; 如果有路径要修改&#xff0c;则修改下就可以了&a…
阅读更多...
【机器学习】西瓜书第一章 绪论

【机器学习】西瓜书第一章 绪论

参考资料&#xff1a;[1]周志华.机器学习[M].清华大学出版社,2016. 一、引言 我们生活中存在许多基于经验做出的判断&#xff0c;比如月明星稀&#xff0c;那第二天可能会是好天气&#xff1b;一个西瓜敲起来声音响&#xff0c;色泽也不错&#xff0c;大概率是一个好瓜。 我…
阅读更多...
React Hook Form：指南与示例

React Hook Form：指南与示例

表单是用户与网站和Web应用程序交互的重要组成部分。验证用户通过表单提交的数据是开发者的一项关键职责。 React Hook Form是一个帮助在React中验证表单的库。它是一个没有其他依赖项的精简库&#xff0c;性能优越&#xff0c;使用简单&#xff0c;开发者可以比使用其他表单库…
阅读更多...
CTFHub SSRF靶场通关攻略

CTFHub SSRF靶场通关攻略

内网访问 首先进入环境 在url后面输入 http://127.0.0.1/flag.php访问&#xff0c;得出flag 伪协议读取文件 进入环境后再url后面拼接 file:///var/www/html/flag.php 访问后是&#xff1f;&#xff1f;&#xff1f;&#xff0c;那么我们F12检查源码得出flag 端口扫描 我们进行…
阅读更多...
服务保护方案Sentinel

服务保护方案Sentinel

微服务雪崩问题 微服务调用链路中某个服务故障&#xff0c;导致tomcat资源耗尽&#xff0c;引起整个链路中的所有微服务都不可用&#xff0c;这就是微服务的雪崩。 解决方案 请求限流 线程隔离 服务熔断 Sentinel 认识Sentinel 下载jar包 可以下载jar包&#xff0c;wind…
阅读更多...
Pytest项目搭建总结

Pytest项目搭建总结

以接口自动化项目为例 打开终端依次输入如下命令&#xff1a; mkdir PytestDemo cd PytestDemo #创建Python项目虚拟环境 python -m venv .env #激活虚拟环境 source .env/bin/activate #安装第三方库 pip install requests pip install pytest pip install pytest-html pip …
阅读更多...
在 Windows 上安装 Docker

在 Windows 上安装 Docker

1 前言 要开始使用 Docker&#xff0c;您首先需要在开发计算机上安装它。 安装类型取决于您的操作系统。 Windows 10 计算机上的安装与 Windows Server 计算机上的安装不同。 最低系统要求为进行了周年纪念更新的 Windows 10 专业版或企业版&#xff08;版本 1607&#xff09;…
阅读更多...
最新文章

Copyright @ 2022~2023