webpack VUEJS -> ValidationError：无效的选项对象,已使用与API架构不匹配的选项对象初始化Dev Server

afdcj2ne 于 2023-08-06 发布在 Webpack

关注(0)|答案(2)|浏览(184)

我在使用Vuejs 2和webpack 5时遇到了这个问题：

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 (C:\Users\erbisilva\Documents\GitHub\hefesto\hefesto-website\node_modules\webpack-dev-server\node_modules\schema-utils\dist\validate.js:158:11)
    at new Server (C:\Users\erbisilva\Documents\GitHub\hefesto\hefesto-website\node_modules\webpack-dev-server\lib\Server.js:270:5)
    at serve (C:\Users\erbisilva\Documents\GitHub\hefesto\hefesto-website\node_modules\@vue\cli-service\lib\commands\serve.js:194:20)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

字符串
我发现了很多其他的帖子，没有什么帮助我：

put allowedhosts to all
deleted node_modules and .lock.json
changed package.json file

型
还是一样的问题
在4.5版本中（我相信），它可以使用：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: [
    'vuetify'
  ],
  lintOnSave: false,
  devServer: {
      public: process.env.VUE_APP_DOMAIN,
      port: 8000
  },
})

型
但是webpack5似乎是一个问题，我不能解决它
谁能给予我一点“光”？我正在尝试将我的项目部署到digitalocean。如果我在没有devServer的情况下部署，它会给我一个错误：

Invalid host header

型
我想这是因为我缺少devServer配置。但是当我加进去的时候，我就有那个问题了
先谢了

webpack

来源：https://stackoverflow.com/questions/76739063/vuejs-validationerror-invalid-options-object-dev-server-has-been-initialize

2条答案

按热度按时间

nukf8bse1#

变更后：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: [
    'vuetify'
  ],
  lintOnSave: false,
  devServer: {
    client: {
      // Can be `string`:
      //
      // To get protocol/hostname/port from browser
      // webSocketURL: 'auto://0.0.0.0:0/ws'
      webSocketURL: {
        hostname: process.env.VUE_APP_DOMAIN,
        pathname: "/ws",
        port: 8000,
      },
    },
  },
})

字符串
当我尝试访问该页面时出现此错误。我正在使用数字海洋进行部署

ERROR
Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
    at new WebSocketClient (webpack-internal:///./node_modules/webpack-dev-server/client/clients/WebSocketClient.js:18:19)
    at initSocket (webpack-internal:///./node_modules/webpack-dev-server/client/socket.js:34:12)
    at eval (webpack-internal:///./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=coral-app-qeatm.ondigitalocean.app&port=8000&pathname=%2Fws&logging=none&progress=true&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=true&live-reload=true:332:55)
    at ./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=coral-app-qeatm.ondigitalocean.app&port=8000&pathname=%2Fws&logging=none&progress=true&overlay=%7B%22errors%22%3Atrue%2C%22warnings%22%3Afalse%7D&reconnect=10&hot=true&live-reload=true (https://coral-app-qeatm.ondigitalocean.app/js/chunk-vendors.js:2530:1)
    at __webpack_require__ (https://coral-app-qeatm.ondigitalocean.app/js/app.js:1417:33)
    at https://coral-app-qeatm.ondigitalocean.app/js/app.js:2537:83
    at __webpack_require__.O (https://coral-app-qeatm.ondigitalocean.app/js/app.js:1463:23)
    at https://coral-app-qeatm.ondigitalocean.app/js/app.js:2540:53
    at https://coral-app-qeatm.ondigitalocean.app/js/app.js:2542:12

型

赞(0）回复(0）举报 2023-08-06

tcomlyy62#

Webpack 4.5：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: [
    'vuetify'
  ],
  lintOnSave: false,
  devServer: {
      public: process.env.VUE_APP_DOMAIN,
      port: 8000
  },
})

字符串
变更为：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: [
    'vuetify'
  ],
  lintOnSave: false,
  devServer: {
    allowedHosts: 'all',
    client: {
      // Can be `string`:
      //
      // To get protocol/hostname/port from browser
      // webSocketURL: 'auto://0.0.0.0:0/ws'
      webSocketURL: 'auto://0.0.0.0:0/ws'
    },
  },
})

型

赞(0）回复(0）举报 2023-08-06

我来回答

webpack VUEJS -> ValidationError：无效的选项对象,已使用与API架构不匹配的选项对象初始化Dev Server

2条答案

相关问题

热门标签

最新问答