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。

相关推荐
黄泉路醉s2 小时前
在Vant+Vue+TypeScript的H移动前端使用UnoCSS
前端·vue.js·typescript
2501_915909062 小时前
iOS 应用反调试技详解术 检测调试器的原理与防护实践
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者83 小时前
TraceEagle 代理抓包详解,无感代理、去证书绑定与 HTTP/3 解密能力解析
网络协议·计算机网络·网络安全·ios·adb·https·udp
我要两颗404西柚4 小时前
Stage three:VUE工程化与实战工具
前端·javascript·vue.js
阿虎儿5 小时前
Linux 下为局域网 IP(如 192.168.1.100)打造不受浏览器警告的自签名 SSL/TLS 证书
linux·安全·https
谢斯6 小时前
[vscode] 使用unity打开vscode的取消.csproj的显示
ide·vscode·unity
看昭奚恤哭6 小时前
基于 RuoYi-Vue-Pro 定制了一个后台管理系统 magic-admin , 开源出来!
前端·vue.js·开源
2501_9160074719 小时前
SwiftUI 声明式语法与 Xcode 预览功能详解
ide·vscode·ios·swiftui·个人开发·xcode·敏捷流程
妙码生花20 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(四十五):前端远程下拉输入组件
前端·javascript·vue.js
Listen·Rain1 天前
AGENTS.md — Vue 3 Frontend Development
前端·javascript·vue.js