简介
在前端项目开发过程中，错误信息的提示十分重要，特别是在开发过程中，快速定位错误，修复错误，能够有效提高我们的开发效率。本文将介绍一个非常优秀的npm包——@nuxt/friendly-errors-webpack-plugin，它能够自定义错误信息，并且友好展示在控制台上，为我们开发工作带来极大的方便。
安装
我们可以通过npm的方式进行安装，使用如下命令：
npm install @nuxt/friendly-errors-webpack-plugin --save-dev
使用
在我们安装好@nuxt/friendly-errors-webpack-plugin后，在nuxt.config.js中引入该插件：
-- -------------------- ---- -------
----------------
----- --------------------------- - ------------------------------------------------
-------------- - -
------ -
-------- -
--- -----------------------------
-
-
-完成上述步骤后，我们就可以在终端中看到优美的错误提示信息了。
自定义错误信息
@nuxt/friendly-errors-webpack-plugin提供了非常方便的自定义错误信息的方式，我们使用如下代码可以覆盖默认错误信息：
-- -------------------- ---- -------
----------------
--- -----------------------------
----------------------- -
--------- ----- ----------- -- ------- ---- ------------------------
------ ------ ----------- ----- -- -- --------- ----- ---------- -------------
--
--------- -------- ---------- ------- -
-- --- --- ------ -- ------ ----------- --- ----------- -- --- ------
-- -------- --- -- ------- -- ---------
--
------------- ----
--深度学习和指导意义
@nuxt/friendly-errors-webpack-plugin不仅能够帮助我们快速定位错误，提高开发效率，同时也增加了我们对前端工具的使用技能。掌握这个npm包的使用方式，将为我们今后的前端工作提供深度学习和指导意义。
示例代码
以下是一个使用了@nuxt/friendly-errors-webpack-plugin插件的nuxt项目的nuxt.config.js文件示例代码：
-- -------------------- ---- -------
----------------
----- --------------------------- - ------------------------------------------------
-------------- - -
------ -
-------- -
--- -----------------------------
----------------------- -
--------- ----- ----------- -- ------- ---- ------------------------
------ ------ ----------- ----- -- -- --------- ----- ---------- -------------
--
--------- -------- ---------- ------- -
-- --- --- ------ -- ------ ----------- --- ----------- -- --- ------
-- -------- --- -- ------- -- ---------
--
------------- ----
--
-
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f0a5e39403f2923b035c082