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

构建异常

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

解决方法

6. 问题 vue3 vue 组件 name 报错

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

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

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

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

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

<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';

如果您是在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 这个模块，但它在你的项目的某个地方被要求引用。这通常发生在以下几种情况：

依赖未安装

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