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

这篇具有很好参考价值的文章主要介绍了vue.config.js配置报错——可能是与webpack混淆。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

介绍

配置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 配置,因此需要包含原始配置中的其他部分,例如 entryoutput 等。你可以根据需要在 configureWebpack 中添加其他 Webpack 配置选项。

通过以上修改,你应该可以成功添加自定义的 Webpack rules 配置到 Vue 项目中。文章来源地址https://www.toymoban.com/news/detail-702964.html

到了这里,关于vue.config.js配置报错——可能是与webpack混淆的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vite.config.js配置-解决跨域问题,以及@vitejs/plugin-vue等报错

    在配置的过程中踩了很多坑,还是太菜,有些东西弄不明白什么意思。 运行项目时的报错可直接到最下面看vite.config.js文件的注释 目前项目用到的模块并不多,package.json文件如下 其实主要还是这些模块的版本兼容问题 vite的版本最开始是1.0.0,后面很多地方搞不下去了才卸载

    2023年04月08日
    浏览(44)
  • 已配置vue.config.js中的proxy代理,前端本地环境仍然请求后端出现跨域报错

    已配置vue.config.js中的proxy代理,前端本地环境仍然请求后端出现跨域报错 已配置vue.config.js中的proxy代理,前端本地环境仍然请求后端出现跨域报错 控制台仍然出现cors禁止报错,接口调不通 配置proxy代理解决跨域问题的原理是: 前端工程本地环境会启动一个 express 或 koa 的

    2024年02月01日
    浏览(58)
  • 【webpack学习】React项目中webpack.config.js 和 webpack.base.config.js 的区别

    在React项目中,通常使用Webpack作为打包工具。 webpack.config.js 和 webpack.base.config.js 两个文件在项目中的作用是不同的。 webpack.config.js 是Webpack的主要配置文件,它包含了项目的通用配置以及针对不同环境(如开发环境和生产环境)的特定配置。 这个文件包含了整个Webpack配置的

    2024年01月23日
    浏览(50)
  • vue.config.js配置详解

    vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。 以下是 vue.config.js 的一个基本配置: 这里只是列出

    2024年02月15日
    浏览(54)
  • 解读vue配置文件(vue.config.js)

    这是一个Vue.js的配置文件,用于指定项目的构建和开发服务器的行为。让我们逐步解读: resolve 函数: 用于解析路径。它被定义为简化创建目录的绝对路径的过程。 name 和 port 常量: name 设置为来自设置文件的标题。 port 设置为 8013 ,表示开发服务器的端口号。 publicPath :

    2024年01月17日
    浏览(48)
  • 【Vue】vue.config.js 的完整配置

    之前,我有提到过,当然大家肯定也都知道,Vue3.0不在有webpack.config.js的配置;但是不可避免,在项目开发中我们肯定会存在一些特殊的需求需要调整webpack, 这个时候,在Vue3.0的项目当中,我们就需要在根目录创建vue.config.js去完成webpack的一些特殊配置,默认它会被 @vue/cli-servi

    2023年04月22日
    浏览(47)
  • vue.config.js 跨域配置

    一般是配置 .env .env.production 等。 默认配置就是用 .env 示例: 为啥要封装,因为开发模式需要proxy代理。。而线上模式不需要。 /dev-api 只要不和web里的path 冲突就行,也可以取其他名字。 开发模式 就是web的路径,再加个特殊的path 用作代理。 其他模式 不需要proxy配置,直接走

    2024年02月11日
    浏览(47)
  • vue.config.js中proxy配置

    这里以axios发请求为例 如果发送的请求都以 /abc 开头,那么我们就可以在proxy中进行服务器代理配置。 3.代理多个接口 方法1:监测多个接口,可以在proxy中写多个配置:(适用于target不同的代理,相同也可以用这个方法,就是会麻烦一点,对于相同的target方法2会比较方便)

    2024年02月22日
    浏览(48)
  • vue.config.js中打包相关配置

    1.原始篇 2.改进篇 通过对chunk生成的css和js文件数量和大小做限制,对代码进行压缩和分割,线上生产环境下使用cdn方式等对webpack打包优化。

    2024年01月22日
    浏览(49)
  • vue.config.js 配置proxy代理

    方案一: 配置文件 文件内容 三个文件分别是三个不同环境使用的,如线上,线上测试,本地测试。我在本地测试时三个文件都配置成了一样。  vue.config.js 配置文件 问题: 控制台显示 400 (Bad Request)或404等问题都是 vue.config.js 配置文件 的 proxy 的配置问题。 主要检查点

    2024年03月15日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包