当前位置： 首页 > news >正文

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

news 来源：原创 2024/9/20 6:57:36

构建异常

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

解决方法：

示例代码：

// 错误的使用方式
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)

例如：

解决办法：

// eslint-disable-next-line no-unused-vars

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

vue3 使用

@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 报错

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>

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。

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

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

<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进行安装：

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安装。如果没有安装，运行以下命令进行安装：

npm install vue-cropper --save
npm install vue-cropper --force

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

import VueCropper from 'vue-cropper'

清除：

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

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 引用异常

 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 版本，如下所示：

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

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

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

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

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.

异常分析：

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

使用文心一言的分析：

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

 

"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的兼容性）。

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 小白之 FastGPT Windows 本地化部署
  • 案例：LVS-DR模式
  • 大模型备案全网最详细流程解读（附附件+重点解读）
  • 使用 Python 和 PyQt5 构建多线程图片下载器
  • 单HTML文件集成vue3+ElementPlus的使用
  • 构建高效NLP管道：PydanticOutputParser与Langchain的结合
  • 机器学习课程学习周报九
  • 【文档合集】软件类常用文档整理大全，软件工程，软件项目管理，技术标书方案，模
  • 【系统规划与管理师】【案例分析】【课后习题】第九章 IT服务营销
  • 数据库架构演变过程
  • vagrant 创建虚拟机
  • 使用notepad++将shell脚本转为UNIX格式方法（主要差别在换行符）
  • SpringBoot集成google登陆快速入门Demo
  • 运放篇——理想运放与实际运放
  • Docker 安装与配置 Docker Registry 指南
  • CEF与代理
  • Laravel 菜鸟晋级之路
  • PAT A1120
  • Phpstorm怎样批量删除空行？
  • ReactNative开发常用的三方模块
  • Spring-boot 启动时碰到的错误
  • SQLServer插入数据
  • 观察者模式实现非直接耦合
  • 基于webpack 的 vue 多页架构
  • 警报：线上事故之CountDownLatch的威力
  • 排序算法学习笔记
  • 入门到放弃node系列之Hello Word篇
  • 收藏好这篇，别再只说“数据劫持”了
  • 微信小程序填坑清单
  • 项目管理碎碎念系列之一：干系人管理
  • 用Visual Studio开发以太坊智能合约
  • ​软考-高级-信息系统项目管理师教程 第四版【第19章-配置与变更管理-思维导图】​
  • $.proxy和$.extend
  • （2）nginx 安装、启停
  • （编译到47%失败）to be deleted
  • （超简单）使用vuepress搭建自己的博客并部署到github pages上
  • (紀錄)[ASP.NET MVC][jQuery]-2 純手工打造屬於自己的 jQuery GridView (含完整程式碼下載)...
  • （简单有案例）前端实现主题切换、动态换肤的两种简单方式
  • （每日一问）设计模式：设计模式的原则与分类——如何提升代码质量？
  • （三）Honghu Cloud云架构一定时调度平台
  • （未解决）macOS matplotlib 中文是方框
  • （学习日记）2024.04.04：UCOSIII第三十二节：计数信号量实验
  • （一）Mocha源码阅读: 项目结构及命令行启动
  • (原創) 如何讓IE7按第二次Ctrl + Tab時，回到原來的索引標籤? (Web) (IE) (OS) (Windows)...
  • (原創) 物件導向與老子思想 (OO)
  • .gitignore文件使用
  • .htaccess配置常用技巧
  • .net mvc actionresult 返回字符串_.NET架构师知识普及
  • .net6 core Worker Service项目，使用Exchange Web Services (EWS) 分页获取电子邮件收件箱列表，邮件信息字段
  • .net访问oracle数据库性能问题
  • .NET中winform传递参数至Url并获得返回值或文件
  • @require_PUTNameError: name ‘require_PUT‘ is not defined 解决方法
  • [ 2222 ]http://e.eqxiu.com/s/wJMf15Ku
  • [ A*实现 ] C++，矩阵地图
  • [ MSF使用实例 ] 利用永恒之蓝(MS17-010)漏洞导致windows靶机蓝屏并获取靶机权限