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

huangapple
go评论92阅读模式
英文:

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

问题

出现了将Django与Vue.js链接的错误。

在我的vue.config.js文件中：

  1. const BundleTracker = require('webpack-bundle-tracker');
  3. module.exports = {
  4.   publicPath: 'http://127.0.0.1:8080/',
  5.   outputDir: './dist/',
  6.   
  7.   chainWebpack: config => {
  8.     config.optimization.splitChunks(false);
  10.     config.plugin('BundleTracker').use(BundleTracker, [{ filename: './webpack-stats.json' }]);
  12.     config.devServer
  13.       .public('http://0.0.0.0:8080')
  14.       .host('0.0.0.0')
  15.       .port(8080)
  16.       .https(false)
  17.       .headers({ "Access-Control-Allow-Origin": ["*"] });
  18.   },
  20.   pages: {
  21.     index: 'src/main.js'
  22.   }
  23. }

这是在命令行中的错误。

  1. npm run serve
  3. > django-vue@0.1.0 serve
  4. > vue-cli-service serve
  6.  INFO  Starting development server...
  7.  ERROR  ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  8.          - options has an unknown property 'public'. These properties are valid:
  9.            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? }
  10. ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  11.  - options has an unknown property 'public'. These properties are valid:
  12.    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? }
  13.     at validate (/Users/byengju/Documents/01. Project/dataglass/django-vue/node_modules/schema-utils/dist/validate.js:115:11)
  14.     at new Server (/Users/byengju/Documents/01. Project/dataglass/django-vue/node_modules/webpack-dev-server/lib/Server.js:231:5)
  15.     at serve (/Users/byengju/Documents/01. Project/dataglass/django-vue/node_modules/@vue/cli-service/lib/commands/serve.js:194:20)
  16.     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

我该如何解决这个问题？

英文:

There was an error linking django with vuejs.

in my vue.config.js file:

  1. const BundleTracker = require('webpack-bundle-tracker');
  3. module.exports = {
  4.   publicPath: 'http://127.0.0.1:8080/',
  5.   outputDir: './dist/',
  7.   chainWebpack: config => {
  8.     config.optimization.splitChunks(false)
  10.     config.plugin('BundleTracker').use(BundleTracker, [{filename: './webpack-stats.json'}])
  12.     config.devServer.public('http://0.0.0.0:8080').host('0.0.0.0').port(8080).https(false).headers({"Access-Control-Allow-Origin":["\*"]})
  13.   },
  15.   pages: {
  16.     index: 'src/main.js'
  17.   }
  18. }

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?

答案1

得分: 1

正如错误提示所述，public 在你的代码中不是一个有效的属性，你使用了 config.devServer.public('http://0.0.0.0:8080')。public 是webpack-dev-server v3中的属性，但根据你的错误信息和可用属性名称列表，显然你正在使用webpack-dev-server v4。

不过，你需要问自己是否需要指定通常作为默认 devserver 地址的 0.0.0.0:8080（localhost:8080）。尝试移除该属性并测试你的应用是否正常工作。通常，这样的属性仅在代理或 WebSocket 地址时才需要。迁移指南 从 v3 到 v4 甚至指出：

public、sockHost、sockPath 和 sockPort 选项已被移除，以支持 client.webSocketURL 选项：

v3:

  1. module.exports = {
  2.   devServer: {
  3.     public: "ws://localhost:8080",
  4.   },
  5. };
  6. module.exports = {
  7.   devServer: {
  8.     sockHost: "0.0.0.0",
  9.     sockPath: "/ws",
  10.     sockPort: 8080,
  11.   },
  12. };

v4:

  1. module.exports = {
  2.   devServer: {
  3.     client: {
  4.       // 可以是字符串:
  5.       //
  6.       // 从浏览器获取协议/主机名/端口
  7.       // webSocketURL: 'auto://0.0.0.0:0/ws';
  8.       webSocketURL: {
  9.         hostname: "0.0.0.0",
  10.         pathname: "/ws",
  11.         port: 8080,
  12.       },
  13.     },
  14.   },
  15. };
英文:

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:

  1. module.exports = {
  2.   devServer: {
  3.     public: "ws://localhost:8080",
  4.   },
  5. };
  6. module.exports = {
  7.   devServer: {
  8.     sockHost: "0.0.0.0",
  9.     sockPath: "/ws",
  10.     sockPort: 8080,
  11.   },
  12. };

v4:

  1. module.exports = {
  2.   devServer: {
  3.     client: {
  4.       // Can be `string`:
  5.       //
  6.       // To get protocol/hostname/port from browser
  7.       // webSocketURL: 'auto://0.0.0.0:0/ws'
  8.       webSocketURL: {
  9.         hostname: "0.0.0.0",
  10.         pathname: "/ws",
  11.         port: 8080,
  12.       },
  13.     },
  14.   },
  15. };

huangapple
  • 本文由 发表于 2023年2月27日 12:37:22
  • 转载请务必保留本文链接：https://go.coder-hub.com/75576820.html
  • django
  • vue.js
  • webpack
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定