fix: add "devServer.server.type" to "useHttps" judgement

[backrunner]

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Docs
• Underlying tools
• Other, please describe:

Does this PR introduce a breaking change? (check one)

• Yes
• No

Other information:

In the recent merged Pull Request #7202 which authored by me, the fixed judgement expression is not perfect, it should also consider the devServer.server.type because it can be an object.

This patch add another judgement expression to cover this case, if user set devServer.server.type to https or spdy, the protocol will be https.

[jacekkarczmarczyk]

With this fix https for the application seems to work fine, however it fails to connect to HMR server:

module.exports = defineConfig({
  devServer: {
    server: {
      type: 'https',
      options: {
        key: fs.readFileSync('...'),
        cert: fs.readFileSync('...'),
      },
    },
  },

iirc the following config worked in vue cli 4/webpack 4

  devServer: {
    https: {
      key: fs.readFileSync('...'),
      cert: fs.readFileSync('...'),
    },
  },

[backrunner]

With this fix https for the application seems to work fine, however it fails to connect to HMR server:

module.exports = defineConfig({
  devServer: {
    server: {
      type: 'https',
      options: {
        key: fs.readFileSync('...'),
        cert: fs.readFileSync('...'),
      },
    },
  },

iirc the following config worked in vue cli 4/webpack 4

  devServer: {
    https: {
      key: fs.readFileSync('...'),
      cert: fs.readFileSync('...'),
    },
  },

Your case is similar to #7160, if NODE_ENV is not production, @vue/cli-service always prefer using the lan IP as webSocketURL. I think that might not work properly in some scenarios. You can try to set devServer.client.webSocketURL to auto://localhost:[YOUR_SERVER_PORT]/ws and set devServer.allowedHosts to all if you're running the dev server at local.

[jacekkarczmarczyk]

Thanks @backrunner
Following config works fine for me

  devServer: {
    server: {
      type: 'https',
      options: {
        key: fs.readFileSync('...'),
        cert: fs.readFileSync('...'),
      },
    },
    client: {
      webSocketURL: 'auto://localhost:8081/ws',
    },
    allowedHosts: 'all',
  },

[lyanerzhang]

 devServer: {
    server: {
      type: "https",
      // options: {
      //   key: fs.readFileSync("/Users/li/server.key"),
      //   cert: fs.readFileSync("/Users/li/server.crt")
      // }
    },
    client: {
      webSocketURL: "https://localhost:4003/"
    },
    allowedHosts: ["all"],
    overlay: {
      warnings: false,
      errors: false
    },
    headers: {
      "Access-Control-Allow-Origin": "*"
    },
    // host: "192.168.1.8",
    port: 4003, // 端口号
    // https: true,
    // open: false, //配置自动启动浏览器
    hot: true, // 热更新
    hotOnly: true,
    disableHostCheck: true,
    proxy: {
      "/api": {
        target: "https://yanshou4.xxx.com/", // 测试环境
        changeOrigin: true,
        pathRewrite: {
          "^/": "/"
        }
      }
    }
  }

增加了上述配置后，报错了