记录一个vue项目报错UnhandledPromiseRejectionWarning: Unhandled promise rejection.

2023-10-27

使用vue-cli创建vue项目,加入一些之前的代码,然后打包运行报错:

(node:4892) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing insi
de of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection
 id: 1)
(node:4892) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections
 that are not handled will terminate the Node.js process with a non-zero exit code.
 // 然后加卡在这里不动了
18% building modules 72/73 modules 1 active ...ce-demo\weixin-vioce-demo\src\App.vue

网上查阅了很多的资料,下面是我整理的解决方案:

  1. 在build文件夹下找到webpack.base.conf.js
    然后修改加入const vueLoaderPlugin = require(‘vue-loader/lib/plugin’)
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
//加入的
const vueLoaderPlugin = require('vue-loader/lib/plugin')
  1. 在module.exports中引入 plugins:[new vueLoaderPlugin()]
 plugins:[
     new vueLoaderPlugin()
   ]
  1. 下面是我的文件的完整代码
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
const vueLoaderPlugin = require('vue-loader/lib/plugin')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      { test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.sass$/,
        loaders: ['style', 'css', 'sass']
      },{
        test:/\.style$/,
        use:['style-loader','css-loader']
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  },
  plugins:[
    new vueLoaderPlugin()
  ]
}

当以上解决之后再运行项目一般来说已经可以了,但是我这个项目还不行,继续其他错误

$ webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
internal/modules/cjs/loader.js:638
    throw err;  
 	^
Error: Cannot find module 'vue-loader/lib/plugin'
 at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:690:17) at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (D:\HBuilderProjects\baidu-vioce-demo\weixin-vioce-demo\build\webpack.base.conf.js:6:25)
    at Module._compile (internal/modules/cjs/loader.js:776:30)at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)

这种错误其实网上有很多解决方法
主要的就是将对应的版本更新一下,就是对应的vue-loader这个插件的lib下面没有对应的plugin文件,具体做法:
升级了一下 “vue-loader”: “^15.7.0” 就好了

真棒!!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

记录一个vue项目报错UnhandledPromiseRejectionWarning: Unhandled promise rejection. 的相关文章

随机推荐

  • 97 条 Linux 运维工程师常用命令总结

    ls mv cp scp rm touch pwd cd mkdir rmdir echo cat more less nl head tail vi vim which whereis locate 数据库快速搜寻档案 find grep
  • “泰迪杯”挑战赛-通过图像处理和数据挖掘实现车辆检测与跟踪

    目 录 挖掘目标 分析方法与过程 2 1 总体流程 2 2 具体步骤 2 3 结果分析 结论 参考文献 1 挖掘目标 在建设平安城市的进程中 安全是政府日常管理工作中的重要任务 随着城市报警和监控系统的建设 对于监控数据的分析也日显重要 本
  • powerdesigner物理视图 导出建库脚本(mysql)

    第一步 设置powerdesigner 物理视图 导出数据库类型 菜单栏 DataBase 数据库 generate Database 第二步 设置Powerdesigner 物理视图 导出数据库语言类型 第三步 根据第二步的相关配置 进行
  • web.xml文件详解

    前言 一般的web工程中都会用到web xml web xml主要用来配置 可以方便的开发web工程 web xml主要用来配置Filter Listener Servlet等 但是要说明的是web xml并不是必须的 一个web工程可以没
  • Python错误提示:TypeError: sequence item 2: expected str instance, int found

    我们知道在对list进行拼接 对字符串进行拼接的时候可以使用 join 但是在将list进行拼接转换为字符串的时候报错 大家可以对比看一下 list01 name age 20 s join list01 print s try list0
  • java8之lambda表达式简介

    文章目录 1 概念 2 基础语法 2 1 语法格式一 2 2 语法格式二 2 3 语法格式三 2 4 语法格式四 2 5 语法格式五 2 6 语法格式六 3 Lambda 表达式需要 函数式接口 的支持 4 java内置四大核心函数式接口
  • python的split分割数组_NumPy数组的分割

    在 NumPy 中 利用 split hsplit 和 vsplit 等函数可实现数组的分割操作 split 函数 该函数可沿特定的轴将数组分割为子数组 使用 split 函数的方法如下 numpy split arr indices or
  • K8S安装Master教程(亲测成功)

    配置hosts vim etc hosts 追加如下内容 192 168 18 10 k8s master 192 168 18 11 k8s node1 192 168 18 12 k8s node2 192 168 18 13 k8s
  • 搭建nginx+php后访问不到项目

    记在虚拟机搭建php nginx mysql踩到的坑 首先因为工作原因 离开了上家公司 然后入职xx后 由于没有开发机只能自己搭建了一个虚拟机 搭建好后使用一键安装式工具安装了lnmp环境 之后访问nginx是可以访问通的 但是指定了项目目
  • TCP、UDP、HTTP、SOCKET之间的区别

    IP 网络层协议 TCP和UDP 传输层协议 HTTP 应用层协议 SOCKET TCP IP网络的API TCP IP代表传输控制协议 网际协议 指的是一系列协议 TCP和UDP使用IP协议从一个网络传送数据包到另一个网络 把IP想像成一
  • 二手服务器还是组装机,我表弟不懂电脑,老板竟然给他组装这种电脑:没坑人,明码标价!...

    说到组装电脑 大家都不陌生了 它是多硬件组合的产物 它对硬件搭配有要求 对于动手能力也有一定的要求 于是很多朋友为了省麻烦就会去找熟人或者是电脑店进行咨询组装电脑 前几天 我的表弟就在他居住附近的一家电脑店咨询组装了一台电脑 最后发现被坑惨
  • 原创打造 Claude网页 接口

    先进入App unavailable Anthropic 新建聊天聊起来 在聊之前就要打开f12 监听请求 相关参数打开f12即可找到 注意 需要在打开f12后发送几条信息给claude才有相关链接显示 这两个参数就是我们需要的 cooki
  • Code Blocks IDE在linux下添加include & lib路径

    摘自 url http bbs csdn net topics 350101552 url size large 第一步 编译第三方库 得到头文件和库 例如路径关系 D MyLib include D MyLib lib 在include中
  • 抖音直播间弹幕rpc学习

    目标url 随便找个直播间即可 https live douyin com 198986091107 接口分析 首先并没有在xhr下找到对应的接口 因为采用了websocket来传输信息 切换到ws即可看到 消息下 可以看到16进制的数据在
  • 连接被拒绝 因为没有授权此用户账户进行远程登录

    背景 有时想远程连接某服务器进行操作 但是远程登陆时 却报错 解决办法 在服务器上进行设置 允许用户登录 步骤 1 用允许登录的用户 远程连接服务器 在这里用v liyh登录 点击 开始 图标 运行 如图 在对话框中输入 mstsc 如图
  • 【Linux命令详解

    文章标题 简介 一 参数列表 二 使用介绍 1 显示文件内容 2 创建文件 3 连接文件 4 显示行号 5 压缩空行 6 显示特殊字符 7 显示行号和特殊字符 8 从标准输入读取 9 显示文件开头或结尾 10 备份文件 11 显示文件内容至
  • Redis 配置详解 —— 全网最新最全

    文章目录 一 撰文目的 二 配置详解 1 EXAMPLE 概要说明 2 INCLUDES 配置包含 3 MODULES 加载模块 4 NETWORK 网络配置 5 TLS SSL 通讯协议 6 GENERAL 常规配置 7 SNAPSHOT
  • 【合作 】联通、壳牌、联想、国金证券等众多企业签约 Eolink !

    联通 壳牌 联想 华润置地 中国铁塔等多家知名企业签约 Eolink 携手落地 API 全生命周期管理 感谢广大企业对 Eolink 的信任和选择 Eolink 致力于为企业提供最全面的 API 研发管理解决方案 提供高效 可靠的工具以及服
  • lua文件读写

    文件读写 文件读写对制作游戏很有帮助 可以调用别的文件中的代码 保存最高分 游戏存档 玩家状态等信写到文件中 首先 让我们看一个简单的命令 dofile 这个命令会读入另一个文件的代码并立即执行 代码 dofile test lua 很简单
  • 记录一个vue项目报错UnhandledPromiseRejectionWarning: Unhandled promise rejection.

    使用vue cli创建vue项目 加入一些之前的代码 然后打包运行报错 node 4892 UnhandledPromiseRejectionWarning Unhandled promise rejection This error or