Vue项目本地开发集成引入https实现方式

更新时间：2026年03月26日 09:50:27 作者：咸蛋超人l

这篇文章主要介绍了Vue项目本地开发集成引入https方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

问题描述

本地项目开发中用到的接口是https ，本地http会请求不到数据

案例使用采用的vue-cli开发，所以需要针对这两种方式启动https

问题处理

1.首先是需要配置一个证书,使用mkcert 进行配置证书

2.在vue-cli 中进行修改package.json、vue.config.js 中进行启用并验证

npm 安装

npm i mkcert -g

生成ca证书

1.首先进入项目主文件夹
2.执行cmd命令 mkdir keys  # 新建文件夹存储证书相关
3.cd keys
4.mkcert create-ca [options] # options 参考npm 文档，可以直接使用默认值


根据ca证书生成cert证书

# mkcert create-cert [options] # options 参考npm 文档

# 如下设置domains
5.mkcert create-cert --domains 127.0.0.1,localhost

注意：

安装证书

进入keys文件夹双击ca.crt，在弹出的对话框中点击“安装证书”

vue-cli 中进行配置

修改vue.config.js

  const https = require('https');
    const fs = require('fs');

    module.exports = {

    devServer: {
    host: '127.0.0.1',
    https: {
    cert: fs.readFileSync(path.join(__dirname, 'keys/cert.crt'))，
    key: fs.readFileSync(path.join(__dirname, 'keys/cert.key'))
    }
    }
    }

vite 中进行配置

修改vite.package.json

import path from 'path'
import * as fs from 'fs'

export default defineConfig({
 server: {
  https: {
   cert: fs.readFileSync(path.join(__dirname, 'keys/cert.crt'))，
   key: fs.readFileSync(path.join(__dirname, 'keys/cert.key'))
  },
  port: 8089
 }
})

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue模块拖拽实现示例代码
这篇文章主要介绍了vue模块拖拽实现示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
浅谈angular4.0中路由传递参数、获取参数最nice的写法
下面小编就为大家分享一篇浅谈angular4.0中路由传递参数、获取参数最nice的写法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
如何理解Vue的作用域插槽的实现原理
本篇文章主要介绍了如何理解Vue的作用域插槽的实现原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
Vue中封装eCharts组件及优化方式
这篇文章主要介绍了Vue中封装eCharts组件及优化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
这篇文章主要介绍了Vue 中文本内容超出规定行数后展开收起的处理的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
vue3图片放大镜效果实现的完整教程
在Vue中实现放大镜效果,主要是为了增强用户体验,让用户在查看商品图片时能更清晰地观察细节,这篇文章主要介绍了vue3图片放大镜效果实现的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-11-11
Vue3 Vant组件库使用过程中的避坑点
本片文章主要写了，Vue3开发时运用Vant UI库的一些避坑点。让有问题的小伙伴可以快速了解是为什么。也是给自己做一个记录
2023-04-04
Vue引入高德地图并触发实现多个标点的示例详解
这篇文章主要介绍了Vue引入高德地图并触发实现多个标点,主要是在public下的index.html中引入地图，引入组件设置宽高100%，本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-05-05
Element UI 自定义正则表达式验证方法
今天小编就为大家分享一篇Element UI 自定义正则表达式验证方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vuejs开发环境搭建及热更新【推荐】
Vue.js是目前很火的一个前端框架，采用MVVM模式设计，它是以数据驱动和组件化的思想构建的。本文重点给大家介绍Vuejs开发环境搭建及热更新的相关知识，需要的朋友参考下吧
2018-09-09