How to run Vue.js dev serve with https?

When you want to run the Vue.js development server (i.e., vue-cli-service serve) over HTTPS, there are two primary methods to achieve this. This is very useful for simulating production environments or developing security-sensitive content, such as handling authentication or encrypted data. Here are two methods:

Method One: Using vue.config.js Configuration File

In the root directory of your Vue.js project, you can create or modify the vue.config.js file to specify the dev server configuration. You can enable HTTPS by configuring the devServer option:

javascript
module.exports = {
  // Development server configuration
  devServer: {
    https: true,
  }
};

Setting https: true is sufficient to start the development server over HTTPS. Vue CLI will automatically generate self-signed SSL certificates for you, which are typically not trusted by browsers but are sufficient for development purposes.

Method Two: Using Command Line Parameters

If you prefer not to modify the vue.config.js file, you can enable HTTPS directly when starting the development server via command line. In your terminal or command prompt, you can use the following command:

bash
vue-cli-service serve --https

This command will also start a development server over HTTPS using automatically generated self-signed certificates.

Using Custom SSL Certificates

If you have your own SSL certificates and want to provide a testing environment closer to production, you can specify the certificate paths in the vue.config.js file:

javascript
const fs = require('fs');

module.exports = {
  devServer: {
    https: {
      key: fs.readFileSync('/path/to/server.key'),
      cert: fs.readFileSync('/path/to/server.crt'),
      ca: fs.readFileSync('/path/to/ca.pem'),
    }
  }
};

Here, you need to replace /path/to/server.key, /path/to/server.crt, and /path/to/ca.pem with the actual paths to your certificate files. After this configuration, the development server will use your provided certificates to start the HTTPS service.

Conclusion

Running the Vue.js development server over HTTPS helps ensure your development environment is more secure and better simulates the behavior of production environments, especially when handling security-sensitive features. You can choose the method that best suits your situation to enable HTTPS.