Description
Version
5.0.4
Reproduction link
Environment info
Environment Info:
System:
OS: Linux 5.4 Ubuntu 20.04.4 LTS (Focal Fossa)
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Binaries:
Node: 14.17.6 - ~/.nvm/versions/node/v14.17.6/bin/node
Yarn: 1.22.4 - /usr/bin/yarn
npm: 6.14.15 - ~/.nvm/versions/node/v14.17.6/bin/npm
Browsers:
Chrome: 100.0.4896.127
Firefox: 99.0
npmPackages:
@vue/babel-helper-vue-jsx-merge-props: 1.2.1
@vue/babel-helper-vue-transform-on: 1.0.2
@vue/babel-plugin-jsx: 1.1.1
@vue/babel-plugin-transform-vue-jsx: 1.2.1
@vue/babel-preset-app: 5.0.4
@vue/babel-preset-jsx: 1.2.4
@vue/babel-sugar-composition-api-inject-h: 1.2.1
@vue/babel-sugar-composition-api-render-instance: 1.2.4
@vue/babel-sugar-functional-vue: 1.2.2
@vue/babel-sugar-inject-h: 1.2.2
@vue/babel-sugar-v-model: 1.2.3
@vue/babel-sugar-v-on: 1.2.3
@vue/cli-overlay: 5.0.4
@vue/cli-plugin-babel: ^5.0.4 => 5.0.4
@vue/cli-plugin-eslint: ^5.0.4 => 5.0.4
@vue/cli-plugin-router: 5.0.4
@vue/cli-plugin-vuex: 5.0.4
@vue/cli-service: ^5.0.4 => 5.0.4
@vue/cli-shared-utils: 5.0.4
@vue/compiler-core: 3.2.33
@vue/compiler-dom: 3.2.33
@vue/compiler-sfc: ^3.0.0 => 3.2.33
@vue/compiler-ssr: 3.2.33
@vue/component-compiler-utils: 3.3.0
@vue/reactivity: 3.2.33
@vue/reactivity-transform: 3.2.33
@vue/runtime-core: 3.2.33
@vue/runtime-dom: 3.2.33
@vue/server-renderer: 3.2.33
@vue/shared: 3.2.33
@vue/web-component-wrapper: 1.3.0
eslint-plugin-vue: ^8.7.1 => 8.7.1
vue: ^3.0.0 => 3.2.33
vue-eslint-parser: 8.3.0
vue-hot-reload-api: 2.3.4
vue-loader: 17.0.0 (15.9.8)
vue-style-loader: 4.1.3
vue-template-es2015-compiler: 1.9.1
npmGlobalPackages:
@vue/cli: 4.5.15
Steps to reproduce
After creating a project with vue create and then updating dependencies to use webpack v5 (see reproduction repo), and configuring webpack to use HTTPS, we start to get a warning running npm run serve that the devServer.https option is deprecated.
(node:1420683) [DEP_WEBPACK_DEV_SERVER_HTTPS] DeprecationWarning: 'https' option is deprecated. Please use the 'server' option.
The new config format is to use devServer.server like:
module.exports = {
devServer: {
server: {
type: 'https',
options: {
key: path.resolve(process.env.HTTPS_KEY),
cert: path.resolve(process.env.HTTPS_CERT),
},
},
},
};However, once making this change and then starting npm run serve while specifying a valid key/cert via ENV, such as:
HOST=localhost HTTPS_KEY=../.localhost/localhost+2-key.pem HTTPS_CERT=../.localhost/localhost+2.pem npm run serveThere are a few problems, the most serious being that HMR no longer works.
What is expected?
- The "App running at" links should specify links with the "https" protocol
- The webpack-dev-server websocket connection should attempt to connect over "wss://"
What is actually happening?
The init code in serve.js only checks for project options at devServer.https and not devServer.server.type === 'https', so while the webpack server technically works, some parts are overriden by incorrect config generated by vue/cli-service. This results in:
- "App running at" links specify "http://..." instead of "https://..." and then these links don't work due to webpack not listening on "http"
- The webpack-dev-server client socket is configured to connect to the incorrect protocol "ws://" instead of "wss://" which is not allowed by the browser
Probably just need to update the check for useHttps in https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/commands/serve.js#L104 to fix.