vue-cli5配置vue.config.js文件的rules

在 Vue CLI 5 中，可以通过 `vue.config.js` 文件来配置 Webpack 规则。下面是一些常用的配置：

1. 添加规则：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('scss')
      .test(/\.scss$/)
      .use('sass-loader')
      .loader('sass-loader')
      .end()
  }
}

上面的配置添加了一个处理 `.scss` 文件的规则，使用了 `sass-loader`。

2. 修改规则：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('css')
      .oneOf('vue')
      .use('postcss-loader')
      .loader('postcss-loader')
      .tap(options => {
        options.plugins.push(
          require('autoprefixer')({
            grid: true
          })
        )
        return options
      })
      .end()
  }
}

上面的配置修改了处理 Vue 单文件组件中的 `<style>` 标签中的 CSS 的规则，添加了 `autoprefixer` 插件来自动添加 CSS 前缀。

3. 删除规则：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('eslint')
      .exclude.add(/node_modules/)
      .end()
      .use('eslint-loader')
      .loader('eslint-loader')
      .end()
      .enforce('pre')
  }
}

上面的配置删除了原本处理 ESLint 的规则，使用了 `eslint-loader` 来重新添加该规则，并将其设置为 pre-loader，以便在其他 loader 处理之前进行检查。

这些是一些常用的 Webpack 规则的配置方式，具体的配置可以根据需要进行调整。