vscode vue搭建https服务

在VSCode中搭建Vue项目的HTTPS服务,你可以使用Vue CLI创建项目,并配置一个本地的HTTPS服务器。以下是步骤和示例代码:

注意:如果已有一个vue项目,请移步4;如果已安装http-server请移步5.

1.安装Vue CLI(如果尚未安装)
bash 复制代码
npm install -g @vue/cli
2.创建一个新的Vue项目
bash 复制代码
vue create my-vue-app
3.进入项目目录
bash 复制代码
cd my-vue-app
4.安装http-server包(一个简单的HTTP服务器)
bash 复制代码
npm install -g http-server
5.启动HTTPS服务器

需要一个有效的SSL证书

  • 如果你已有SSL证书,将http-server配置为使用SSL证书。
  • 如果你没有SSL证书,可以使用自签名证书。

自签名证书的示例:

bash 复制代码
mkdir cert
openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout cert/localhost.key -out cert/localhost.crt
http-server -S -C cert/localhost.crt -K cert/localhost.key
6.修改配置

在你的Vue项目中,修改vue.config.js文件以支持HTTPS(如果你使用的是自签名证书)

javascript 复制代码
module.exports = {
  devServer: {
    https: true
  }
}

7.启动Vue项目

bash 复制代码
npm run serve

现在你的Vue项目应该在HTTPS下运行了。如果你没有SSL证书,浏览器可能会警告证书不受信任,但你仍然可以访问本地开发服务器。如果你需要一个可信的SSL证书,你可以从证书颁发机构(CA)获取一个,或者使用Let's Encrypt提供的免费证书。

注意:先启动HTTPS服务器,后启动项目。

注意:如果涉及其他rest请求相关也要https。

相关推荐
铅笔侠_小龙虾4 分钟前
深入理解 Vue.js 原理
前端·javascript·vue.js
你的眼睛會笑10 分钟前
vue3 使用html2canvas实现网页截图并下载功能 以及问题处理
前端·javascript·vue.js
HIT_Weston11 分钟前
149、【OS】【Nuttx】【周边】效果呈现方案解析:VSCode 打开外部链接(二)
vscode·os·nuttx·文档渲染
无光末阳37 分钟前
vue 环境下多个定时器的创建与暂停的统一封装
前端·vue.js
卓码软件测评40 分钟前
第三方媒体流压力测试:k6插件xk6-webrtc的使用来测试媒体流的性能
网络协议·测试工具·http·https·webrtc·ssl·媒体
我先去打把游戏先41 分钟前
VSCode通过SSH连接到Ubuntu虚拟机失败“找不到ssh安装”问题解决
笔记·vscode·单片机·嵌入式硬件·学习·ubuntu·ssh
CSND7401 小时前
linux离线环境局域网远程ssh连接vscode
linux·vscode·ssh
UCoding1 小时前
我们来学AI编程 -- vscode开发java
java·vscode·ai编程
慧一居士1 小时前
src/App.vue 和 public/index.html 关系和区别
前端·vue.js
念你那丝微笑2 小时前
vue实现批量导出二维码到PDF(支持分页生成 PDF)
前端·vue.js·pdf