{"id":11381,"date":"2024-10-01T12:40:29","date_gmt":"2024-10-01T12:40:29","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=11381"},"modified":"2024-10-01T12:41:33","modified_gmt":"2024-10-01T12:41:33","slug":"run-vue-js-dev-serve-with-https","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/vue\/run-vue-js-dev-serve-with-https","title":{"rendered":"How to Run Vue.js Dev Serve with HTTPS?"},"content":{"rendered":"<p>To run a Vue.js project created with Vue CLI using HTTPS in development, you can follow these steps:<\/p>\n<p>1. Navigate to the root directory of your Vue project.<\/p>\n<p>2. If you don&#8217;t already have a `vue.config.js` file, create one in the root of your project. In this file, you can configure the development server to use HTTPS.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nmodule.exports = {\r\n    devServer: {\r\n      https: true,\r\n      host: 'localhost', \/\/ Optional\r\n      port: 8080, \/\/ Optional\r\n    },\r\n  };<\/pre>\n<p>3. Now, you can run your development server with HTTPS <\/p>\n<p>4. Open your browser and navigate to `https:\/\/localhost:8080` (or the specified port). You may need to accept a security warning since you&#8217;re using a self-signed certificate.<\/p>\n<p>5. If you want to customize the SSL certificate (e.g., for production-like environments), you can specify `key` and `cert` paths in the `devServer` configuration:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\r\nconst fs = require('fs');\r\n   const path = require('path');\r\n   module.exports = {\r\n     devServer: {\r\n       https: {\r\n         key: fs.readFileSync(path.resolve(__dirname, 'path\/to\/your\/server.key')),\r\n         cert: fs.readFileSync(path.resolve(__dirname, 'path\/to\/your\/server.crt')),\r\n       },\r\n     },\r\n   };\r\n<\/pre>\n<p>Make sure to replace the paths with the actual locations of your SSL certificate and key if you&#8217;re using your own. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>To run a Vue.js project created with Vue CLI using HTTPS in development, you can follow these steps: 1. Navigate to the root directory of your Vue project. 2. If you don&#8217;t already have a `vue.config.js` file, create one in the root of your project. In this file, you can configure the development server to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":11382,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[13],"tags":[],"class_list":["post-11381","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vue"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11381"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=11381"}],"version-history":[{"count":4,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11381\/revisions"}],"predecessor-version":[{"id":11386,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11381\/revisions\/11386"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/11382"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=11381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=11381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=11381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}