vue3+vite如何在本地进行https调试

这篇具有很好参考价值的文章主要介绍了vue3+vite如何在本地进行https调试。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

有些功能只能在https环境下进行测试,如何在线下运行时进行https调试呢?
开启vite.config中的https,然后引入并使用一个自动签名的包即可。

vue3配置https请求,https,网络协议,http

方式1:

npm i @vitejs/plugin-basic-ssl -D

// vite.config.js
import basicSsl from '@vitejs/plugin-basic-ssl'

export default {
 server: {
    https: true
  },
  plugins: [
    basicSsl()
  ]
}

启动项目弹出一个⚠️页面,会提示不信任的证书。

vue3配置https请求,https,网络协议,http

方式2:

下面我们使用警告模式: vite-plugin-mkcert

npm i vite-plugin-mkcert -D

// vite.config.js
import {defineConfig} from'vite'
import mkcert from'vite-plugin-mkcert'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    https: true
  },
  plugins: [mkcert()]
//plugins: [mkcert({ hosts: ['shop1.com.cn', 'shop1.xxx.com'})]
})

vue3配置https请求,https,网络协议,http


重新启动就会没有提示,一个安全的连接

vue3配置https请求,https,网络协议,http

vite配置没有警告的server.https - 掘金背景 vue3项目在启动的时候,有时候我们要强制使用serve.https, vite项目需要一个合法的证书。 配置 方式1: 我们可以使用官方推荐的:@vitejs/plugin-basic-sslhttps://juejin.cn/post/7213636024111235127文章来源地址https://www.toymoban.com/news/detail-775334.html

到了这里,关于vue3+vite如何在本地进行https调试的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vite项目配置本地开发使用https访问,3分钟搞定

    在开发过程中,有时候需要用到一些音视频接口等需要https才能拿到权限,为方便开发过程中调试,这里就介绍几种vite项目快速开启https访问的方式。vite配置项说明文档:开发服务器选项 | Vite 官方中文文档 这个插件仓库地址:https://github.com/vitejs/vite-plugin-basic-ssl 安装依赖

    2024年02月22日
    浏览(72)
  • 关于 vue vite 项目中本地以及代理中开启https解决方法

    在本地开启https: 在项目配置文件vite.config.ts中关于server配置位置中添加 https:true, 即可。 如图所示   在代理中开启https: 同样在在项目配置文件vite.config.ts中的server中的proxy对象中加入secure: false,protocolRewrite:\\\"https\\\",这两行代码即可, 如果不添加 protocolRewrite:\\\"https\\\", 会自动把

    2024年04月27日
    浏览(39)
  • vite+vue3实现 tomcat 的本地部署

    目录 背景: 1、把项目中vite.config.js文件中的base修改为项目名称 2、有些小伙伴的路由可能需要修改 3、执行打包命令 ​编辑 4、打完包项目目录会出现dist目录 5、复制dist目录到tomcat(widows本地安装tomcat这里就不说明,请自行百度)的webapps下,且把dist目录修改成刚才第一步配置

    2024年02月08日
    浏览(48)
  • vue项目,uniapp项目本地调试开启https,加载本地证书

    废话不多说,前端开发调用摄像头,获取地址位置时需要https的问题,在本地运行时可以参考这篇文章操作 我这里用的mkcert 如果你使用的vite,那么可以直接使用vitejs/plugin-basic-ssl 这时,你应该能看到生成了四个文件 ca.crt ca.key cert.crt cert.key mac 双击ca.cert,在弹出的界面选择

    2024年02月05日
    浏览(55)
  • 【vue3+vite】使用vite-plugin-svg-icons插件显示本地svg图标

    使用vite-plugin-svg-icons插件显示本地svg图标 1.安装vite-plugin-svg-icons插件 2.使用vite-plugin-svg-icons插件 2.1 在项目根目录查找vite.config.js,进行配置 2.2 vite-plugin-svg-icons插件引入在main.js中 2.3 svg图标放入对应路径~~~~~图标路径与iconDirs设置得路径一致 项目中使用示例: //menu.icon是路径里面

    2024年02月12日
    浏览(44)
  • vue3和vite项目在scss中因为本地图片,不用加~

    看了很多文章说要加~,真的好坑哦,我的加了~反而出不来了: 304 Not Modified 所以需要去掉~: 直接引入就好:

    2024年01月25日
    浏览(57)
  • Vite + Vue3 + Ts 【免key、免账号实战本地运行GPT】

    🐔 前期回顾 Vue3 + Ts + Vite —— 封装庆祝彩屑纷飞 示例_彩色之外的博客-CSDN博客 封装 彩屑纷飞 示例 https://blog.csdn.net/m0_57904695/article/details/131718019?spm=1001.2014.3001.5501 目录  🌍 公网  🛹 本地  🪂  源码  🐔  GPT-4 有识图功能 移动版  🤺 移动版APK安装包  免魔法合集GPT、

    2024年02月16日
    浏览(47)
  • 安装配置vue3+vite

    安装 18.0 或更高版本的 Node.js 查看Node版本 显示版本号安装成功   查看cnpm版本 显示版本号安装成功   安装成功后使用 npm list vue来检查vue版本号  现在,已经成功创建了一个 Vue 3 和 Vite 的项目。浏览器会自动打开 目录结构 代码规范和风格 环境变量和配置 API 请求封装 路由

    2024年02月08日
    浏览(35)
  • Vue3+Vite使用Puppeteer进行SEO优化(SSR+Meta)

    【笑小枫】https://www.xiaoxiaofeng.com上线啦 资源持续整合中,程序员必备网站,快点前往围观吧~ 我的个人博客【笑小枫】又一次版本大升级,虽然知道没有多少访问量,但我还是整天没事瞎折腾。因为一些功能在Halo上不太好实现,所以又切回了Vue3项目,本文就是对于Vue单页面

    2024年01月25日
    浏览(54)
  • hbuilderx本地调试h5 vue应用的时候,怎么使用https证书?

    使用uniapp在本地开发的时候,有时候是需要有https证书的,不然会提示证书错误。像camera的授权使用,还有gps地理位置的授权使用。如果没有https证书是很麻烦的。 那么可以在hbuilderx调试h5的使用https,而不是http呢?是可以的。  找到mainfest.json文件,在h5字段里添加 这样就会

    2024年02月09日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包