vue.config.js配置报错——可能是与webpack混淆

vue.config.js配置

介绍

配置vue.config.js时，报错信息 “Invalid options in vue.config.js: ‘module’ is not allowed” ，表示在

vue.config.js

文件中不允许直接配置

module

选项。

解决方法

在 Vue CLI 3 及以上版本中，

vue.config.js

是用于配置 Vue 项目的文件，但是它只允许配置特定的选项，而不是所有的 Webpack 配置选项。其中，

module

选项是属于 Webpack 的配置，不应该直接放在

vue.config.js

中。

如果你需要配置 Webpack 的 rules，可以使用

configureWebpack

选项来添加自定义的 Webpack 配置。下面是一个示例：

module.exports ={configureWebpack:{module:{rules:[// 在这里添加你的 rules 配置{test:/\.js$/,exclude:/node_modules/,use:{loader:'babel-loader',options:{presets:['@babel/preset-env'],},},},// ...],},},};

在上面的示例中，我们使用

configureWebpack

选项来添加自定义的 Webpack 配置，其中包括了一个针对

.js

文件的转译规则。

请注意，在使用

configureWebpack

选项时，会完全覆盖默认的 Webpack 配置，因此需要包含原始配置中的其他部分，例如

entry

、

output

等。你可以根据需要在

configureWebpack

中添加其他 Webpack 配置选项。

通过以上修改，你应该可以成功添加自定义的 Webpack rules 配置到 Vue 项目中。