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。

相关推荐
Sheldon一蓑烟雨任平生6 小时前
Vue3 依赖注入(provide 和 inject)
vue.js·inject·provide·vue3 依赖注入·跨级别组件通信
paopaokaka_luck7 小时前
基于SpringBoot+Vue的助农扶贫平台(AI问答、WebSocket实时聊天、快递物流API、协同过滤算法、Echarts图形化分析、分享链接到微博)
java·vue.js·spring boot·后端·websocket·spring
Sheldon一蓑烟雨任平生8 小时前
Vue3 重构待办事项(主要练习组件化)
vue.js·重构·vue3·组件化练习
游戏开发爱好者810 小时前
Fiddler抓包实战教程 从安装配置到代理设置,详解Fiddler使用方法与调试技巧(HTTPHTTPS全面指南)
前端·测试工具·小程序·https·fiddler·uni-app·webview
zuo-yiran12 小时前
vue div标签可输入状态下实现数据双向绑定
前端·javascript·vue.js
qq_3168377512 小时前
使用leader-line-vue 时垂直元素间距过小连线打转的解决
前端·javascript·vue.js
abiao198113 小时前
VUE的“单向数据绑定” 和 “双向数据绑定”
前端·javascript·vue.js
C7211BA13 小时前
Visual Studio Code (VS Code) 官方下载渠道
ide·vscode·编辑器
zhangfeng113313 小时前
win7 VSCode 1.70设置R语言的版本,电脑上有两个版本
ide·vscode·r语言
学习和思考13 小时前
为什么我的vscode有的时候可以跳转,有的时候不能跳转
arm开发·ide·驱动开发·vscode·学习·1024程序员节