使用 Vue3 禁用 Eslint failOnError 导致 Webpack 停止编译

Question

我正在将一个应用程序从 Vue 2 迁移到 Vue 3。在遇到大量对等依赖错误之后，我的项目终于建立起来了，但是新版本的 WebPack 认为 EsLint 错误是真正的错误并停止了构建例如，如果有声明但未使用的变量。

我知道我可以通过将标志 failOnError 设置为 false 来禁用该行为。但是我不知道我应该把它写在哪里。我没有 webpack.config.js 文件接缝 Vue.JS 帮我处理所以我有以下 vue.config.js 文件：

const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    devtool: 'eval-source-map',
    plugins: [
      new webpack.ProvidePlugin({
        _: 'lodash'
      })
    ]
  },

  publicPath: '',

  pluginOptions: {
    cordovaPath: 'src-cordova'
  },
  
  devServer: { https: false }
}

选对地方了吗？我应该创建一个 webpack.config.js 文件吗？

PS：如果您需要更多信息，请发表评论:)

Answer 1

在 Vue CLI 5 脚手架项目（使用 Webpack 5）中，您可以禁用 EslintWebpackPlugin 's failOnError via Vue CLI's chainWebpack option.

在chainWebpack(config)中，使用config.plugin('eslint')得到EslintWebpackPlugin。
链接一个.tap(args) call to modify the plugin's arguments (args is an object array in this case). The first argument is the options object for the plugin。将该对象的 failOnError 属性设置为 false:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  chainWebpack(config) {
    config.plugin('eslint')
          .tap(args => {
            args[0].failOnError = false
            return args
          })
  },
})

使用 Vue3 禁用 Eslint failOnError 导致 Webpack 停止编译

Disable Eslint failOnError causing Webpack to stop compilation with Vue3

javascript

eslint

webpack

vue.js

vuejs3