Configuration error response (may be confused with webpack)

introduce

During configuration, an error message "Invalid options in : 'module' is not allowed" is reported, indicating that it isDirect configuration is not allowed in the filemoduleOptions.

Solution

In Vue CLI 3 and above,is a file used to configure Vue projects, but it only allows configuration of specific options, not all Webpack configuration options. in,moduleThe option is a configuration belonging to Webpack and should not be placed directlymiddle.

If you need to configure Webpack rules, you can useconfigureWebpackOptions to add custom Webpack configuration. Here is an example:

 = {
  configureWebpack: {
    module: {
      rules: [
        // Add your rules configuration here        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
            },
          },
        },
        // ...
      ],
    },
  },
};

In the example above, we useconfigureWebpackOption to add a custom Webpack configuration, including a target.jsFile translation rules.

Please note that in useconfigureWebpackWhen option, the default Webpack configuration is completely overwritten, so other parts of the original configuration need to be included, such asentry、outputwait. You can use it as neededconfigureWebpackAdd other Webpack configuration options to .

With the above modifications, you should be able to successfully add custom Webpack rules configurations to your Vue project.

The following are all the configuration items and their explanations: (too many cannot be found, press ctrl + F to search globally)

 = {
  publicPath: '/', // Basic URL when deploying application packages  outputDir: 'dist', // Package output directory  assetsDir: '', // Static resource directory  indexPath: '', // Specify the generated output path  filenameHashing: true, // File name hash  pages: undefined, // Multi-page configuration  lintOnSave: true, // Whether eslint-loader is checked when saving  runtimeCompiler: false, // Whether to use a Vue build version containing a runtime compiler  transpileDependencies: [], // By default, babel-loader ignores all files in it node_modules  productionSourceMap: true, // Whether the production environment generates the sourceMap file  crossorigin: undefined, // Set the crossorigin properties of the <link rel="stylesheet"> and <script> tags in the generated HTML  integrity: false, // Whether to enable Subresource Integrity (SRI) in the generated HTML  configureWebpack: {}, // webpack configuration  chainWebpack: () =&gt; {}, // webpack chain configuration  css: {
    modules: false, // Enable CSS modules    extract: true, // Whether to use CSS separation plug-in    sourceMap: false, // Whether to enable source map for CSS    loaderOptions: {}, // css-loader option  },
  devServer: {
    open: false, // Whether to automatically open the browser    host: '0.0.0.0', // Specify to use a host, the default is localhost    port: 8080, // Port number    https: false, // Whether to use https    hotOnly: false, // Whether to enable hot updates    proxy: null, // Configure cross-domain proxy    before: app =&gt; {}, // Provides the ability to execute custom middleware before other middleware inside the server  },
  pluginOptions: {}, // Third-party plug-in configuration};

Summarize

This is the end of this article about the solution to the configuration error. For more related configuration error resolution, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!