如何解决使用 webpack，在 vue-cli 项目中，添加 eslint-loader 出现 invalid options 的问题
在使用 Vue-cli 构建项目时，我们经常会选择webpack这个强大打包工具进行开发，而eslint-loader是我们用来在编译过程中进行代码静态检查的利器，然而有时我们在添加eslint-loader时，可能会遇到invalid options的问题。接下来，我们就来看一看，如何解决这个问题。
出现问题的原因 在安装eslint和eslint-loader的过程中，我们可能会遇到版本不一致的情况，从而导致了这个问题的出现。当我们的版本不一致时，就会出现invalid options的错误信息，而在最新的版本中，这个问题已经解决了。所以，我们需要将eslint和eslint-loader的版本进行升级，来解决这个问题。
解决方案 在解决这个问题的过程中，首先我们需要安装最新的eslint和eslint-loader这两个包。
npm install eslint@latest eslint-loader@latest --save-dev
接下来，我们需要修改webpack.base.conf.js这个文件，将之前的module.exports中的rules数组下的eslint-loader的options修改为use，然后再将options中的相关配置移到一个.eslintrc文件中。
以webpack4为例，其修改后的代码如下：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------------
------- ----------------
-------- ------
---- -
-
------- ---------------
--
--
-------- ---------------
--
-- ----- ----- ---
-
-
--最后，我们在项目的根目录下添加一个.eslintrc文件，其内容如下：
-- -------------------- ---- -------
-
------ -
---------- -----
------- ----
--
--------- ---------------
---------------- -
------------- ---------
-------------- --
------------------------------ -----
------------ ------
--------------- -
------ ----
-
--
---------- ---------------------
-------- -
------------- ------
-------------- -----
-
-至此，我们已经解决了使用webpack，在vue-cli项目中，添加eslint-loader出现invalid options的问题，不过，这里也需要注意，每个项目都有其自身的要求，具体操作还视项目为准。
总结 通过今天的学习，我们知道了如何解决使用webpack，在vue-cli项目中，添加eslint-loader出现invalid options的问题，只需要将eslint和eslint-loader进行升级，然后修改webpack.base.conf.js和添加一个.eslintrc的文件就可以了。
这个过程比较简单，但这也为我们完整地了解Vue-cli项目提供了一个机会。在我们以后的开发中，还需要结合项目实际要求进行更加全面进行操作。
注： 示例代码中的module.exports为webpack4的写法，如果你是webpack3则需要做相应修改。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6471ed83968c7c53b0fd7fb8