Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'public'

There was an error linking django with vuejs.

in my vue.config.js file:

const BundleTracker = require('webpack-bundle-tracker');

module.exports = {
  publicPath: 'http://127.0.0.1:8080/',
  outputDir: './dist/',

  chainWebpack: config => {
    config.optimization.splitChunks(false)

    config.plugin('BundleTracker').use(BundleTracker, [{filename: './webpack-stats.json'}])

    config.devServer.public('http://0.0.0.0:8080').host('0.0.0.0').port(8080).https(false).headers({"Access-Control-Allow-Origin":["\*"]})
  },

  pages: {
    index: 'src/main.js'
  }
}

This is an error on cmd.

npm run serve

> django-vue@0.1.0 serve
> vue-cli-service serve

INFO Starting development server...
ERROR ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- options has an unknown property 'public'. These properties are valid:
object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

• options has an unknown property 'public'. These properties are valid:
  object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
  at validate (/Users/byengju/Documents/01. Project/dataglass/django-vue/node_modules/schema-utils/dist/validate.js:115:11)
  at new Server (/Users/byengju/Documents/01. Project/dataglass/django-vue/node_modules/webpack-dev-server/lib/Server.js:231:5)
  at serve (/Users/byengju/Documents/01. Project/dataglass/django-vue/node_modules/@vue/cli-service/lib/commands/serve.js:194:20)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

How do I solve it?

As the error states, public is not a valid property where you have config.devServer.public('http://0.0.0.0:8080'). It is a property from webpack-dev-server v3 but based on your error message and the list of available property names, you are clearly on webpack-dev-server v4.

Ask yourself though: do you need to specify what is normally the default devserver address, 0.0.0.0:8080 (localhost:8080)? Try just removing the property and test if your app works. Usually such a property is only needed for proxy or websocket addresses. The migration guide from v3 to v4 even says:

> public, sockHost, sockPath, and sockPort options were removed in favor client.webSocketURL option:

v3:

module.exports = {
  devServer: {
    public: "ws://localhost:8080",
  },
};
module.exports = {
  devServer: {
    sockHost: "0.0.0.0",
    sockPath: "/ws",
    sockPort: 8080,
  },
};

v4:

module.exports = {
  devServer: {
    client: {
      // Can be `string`:
      //
      // To get protocol/hostname/port from browser
      // webSocketURL: 'auto://0.0.0.0:0/ws'
      webSocketURL: {
        hostname: "0.0.0.0",
        pathname: "/ws",
        port: 8080,
      },
    },
  },
};