Vue.js：vue.config.js 中的选项无效：不允许使用“插件”

Posted 2023-02-22

【中文标题】Vue.js：vue.config.js 中的选项无效：不允许使用“插件”

【英文标题】：Vue.js: Invalid options in vue.config.js: "plugins" is not allowed

【发布时间】：2020-04-19 21:14:48

【问题描述】：

我有一个 webpack 项目，我想使用 Stylelint 进行 SCSS linting。我已按照 Stylelint 网站上的说明进行安装：

"stylelint": "^12.0.1",
"stylelint-webpack-plugin": "^1.1.2",

然后我把它放在 vue.config.js 中：

plugins: [
  new StylelintPlugin(
    files: '**/*.s?(a|c)ss'
  )
],

当我启动服务器时，我得到了这个：

Invalid options in vue.config.js: "plugins" is not allowed

我搜索了高低，但我没有找到任何东西。 任何帮助将不胜感激。

这里是 vue.config.js：

const StylelintPlugin = require('stylelint-webpack-plugin')

module.exports = 

  plugins: [
    new StylelintPlugin(
      files: '**/*.s?(a|c)ss'
    )
  ],

  assetsDir: 'asset',

  configureWebpack: config => 
    config.entry = '@/wrapper/main.js'
  ,

  chainWebpack: config => 
    config.plugins.delete('prefetch')
  ,

  lintOnSave: undefined,
  runtimeCompiler: true

【问题讨论】：

请出示你的 vue.config.js - 看来你在错误的地方添加了插件

@ValeriiVoronkov 我已经添加了 vue.config.js

将你的插件移动到 configureWebpack 对象中，它就会起作用

@ValeriiVoronkov 我已将其移至 configureWebpack 对象并启动了开发服务器，但它挂起。它什么也不做。可能是什么问题？

尝试使用 require 来评论插件和字符串 - 如果它可以工作，你应该澄清这个插件集的确切情况

【参考方案1】：

调整 webpack 配置的最简单方法是为 vue.config.js 中的 configureWebpack 选项提供一个对象：

// vue.config.js
module.exports = 
  configureWebpack: 
    plugins: [new MyAwesomeWebpackPlugin()]
  

该对象将使用 webpack-merge 合并到最终的 webpack 配置中。

结帐https://cli.vuejs.org/guide/webpack.html 了解更多信息。

【参考方案2】：

你试过这个语法吗：

const StylelintPlugin = require('stylelint-webpack-plugin')

module.exports = 

  assetsDir: 'asset',

  configureWebpack: config => 
    config.entry = '@/wrapper/main.js'
  ,

  chainWebpack: config => 
    config.plugins.delete('prefetch')

    config.plugin('stylelint').use(StylelintPlugin, [
      
        files: '**/*.s?(a|c)ss'
      
    ])
  ,

  lintOnSave: undefined,
  runtimeCompiler: true

这就是我们设法让它发挥作用的方式。

【参考方案3】：

也许这会对某人有所帮助

// vue.config.js
module.exports = 
 configureWebpack: 
  plugins: [
   new MyAwesomeWebpackPlugin()
  ]
 


// In my case i was doing below and was facing the same error
const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = 
    configureWebpack: 
        plugins: [
               new PrerenderSPAPlugin(
                // Required - The path to the webpack-outputted app to prerender.
                staticDir: path.join(__dirname, 'dist'),
                // Required - Routes to render.
                routes: ['/', '/page-path', '/another-page'],
            )
        ]
    ,
    lintOnSave: false

https://cli.vuejs.org/guide/webpack.html#simple-configuration