VuePress: How can I use https in dev server?

Question

Is there any hook to enable https in VuePress dev server?

1. Current solution.

I directly add one line to node_modules/@vuepress/core/lib/node/dev/index.js. This works well, but nasty.

  createServer () {
    const contentBase = path.resolve(this.context.sourceDir, '.vuepress/public')

    const serverConfig = Object.assign({

      https: true, // <--- Added this line.

      disableHostCheck: true,
      compress: true,
      clientLogLevel: 'error',

vuejs/vuepress - /packages/@vuepress/core/lib/node/dev/index.js#L197-L237

2. Background

Because Chrome has changed it's security policy, CORS.

Image: "Mark cross-site cookies as Secure to allow them to be sent in cross-site requests."

3. What I've tried.

I've tried but not working.
- webpack - devServer.https

docs/.vuepress/config.js

  configureWebpack: (config, isServer) => {
    if (!config.devServer) {
      config.devServer = {}
    }
    Object.assign(config.devServer, {
      https: true,
    })
  }

No proper hook
- VuePress - Plugin Option API - beforeDevServer
- VuePress - Plugin Option API - afterDevServer
No command option for https.
- vuejs/vuepress - /packages/vuepress/lib/registerCoreCommands.js#L18-L31

module.exports = function (cli, options) {
  cli
    .command(`dev [targetDir]`, 'start development server')
    .option('-p, --port <port>', 'use specified port (default: 8080)')
    .option('-t, --temp <temp>', 'set the directory of the temporary file')
    .option('-c, --cache [cache]', 'set the directory of cache')
    .option('--host <host>', 'use specified host (default: 0.0.0.0)')
    .option('--no-cache', 'clean the cache before build')
    .option('--no-clear-screen', 'do not clear screen when dev server is ready')
    .option('--debug', 'start development server in debug mode')
    .option('--silent', 'start development server in silent mode')
    .option('--open', 'open browser when ready')
    .action((sourceDir = '.', commandOptions) => {
      const { debug, silent } = commandOptions

4. Related links.

Welcome to StackOverflow community! Seems you have tried to format question yourself, it's.. well at least you tried. Just read this article (stackoverflow.com/editing-help) it will help you in future to handle Markdown. And don't forget to upvote users which provide useful information on your question and mark it as solved. — AlexZeDim
– AlexZeDim, Commented Jul 19, 2020 at 7:31
Check this question, will help you: stackoverflow.com/questions/45807049/… — Gabriel Willemann
– Gabriel Willemann, Commented Jul 20, 2020 at 18:35

nico · Accepted Answer · 2020-07-21 12:59:30Z

2

Add the following settings to config.js.

//
// docs/.vuepress/config.js
//
module.exports = {

  devServer: {
    https: true
  },

}

How to run Vue.js dev serve with https? - Stackoverflow

Thank you for your guidance in many ways.

answered Jul 21, 2020 at 12:59

nico

314 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VuePress: How can I use https in dev server?

1. Current solution.

2. Background

3. What I've tried.

4. Related links.

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1. Current solution.

2. Background

3. What I've tried.

4. Related links.

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related