解决方案:Storkbook 本地开启 https

省流(TL;DR

  • 配置 package.json "storybookhttps": "start-storybook --https --ssl-cert ./ssl/cert.crt --ssl-key ./ssl/cert.key",

  • 安装 mkcert npm i -g mkcert

    mkcert create-ca

    mkcert create-cert --domain "0.0.0.0"

  • 生成的证书文件放入根目录新建的 ssl 文件夹

  • 运行 npm run storybookhttps

背景

最近后端升级了网管,导致所有的开发环境的接口地址也使用了 https。

导致我们本地开发的时候所有的接口都在报跨域(服了。。。说改就改

我们如果使用的是 vue 的话很简单,只需要在 vue.config.ts 中的 devServer 里面开启 https 即可

js 复制代码
devServer: {
    //   ...
    https: true,
},

然而,我们中台项目使用的是 storybook + vue2 来构建和开发,使用过的同学应该知道,storybook 的启动是使用 npm run storybook ,而不是 npm run dev(server)

这就导致我们配置 vue 文件是没有办法开启本地 https 的。所以翻阅文档(吐槽一下,只有英文文档

解决方案

这里直接给出链接地址

寻找一番,找到了 CLI 配置

发现我们可以在运行命令的时候加上 --https 来开启 (这不就是 webpack 的方式吗,恍然大雾,本来就是用 webpack 的 server 来运行

然后给 package.json 里面加上命令

"storybookhttps": "start-storybook --https

可以看到在报错

是因为和 webpack 一样 如果开启了 https 的话需要本地配置 ssl 证书

本地配置 ssl 证书

使用 mkcert

npm i -g mkcert

mkcert create-ca

mkcert create-cert --domain "0.0.0.0"

之后会生成 4 个文件

我们把这些文件放进根目录下的 ssl 文件

然后修改 package.json

"storybookhttps": "start-storybook --https --ssl-cert ./ssl/cert.crt --ssl-key ./ssl/cert.key",

接着运行

pnpm run storybookhttps

等待很久...

运行成功

总结

Storybook 的核心是由 Webpack 和 Vite 等构建器提供支持。这些构建器启动一个开发环境,将您的代码(Javascript、CSS 和 MDX)编译为可执行包,并实时更新浏览器。

  • 因为是 webpack 启动开发环境,所以命令也是使用的 webpack 的 CLI 命令
  • 需要本地生成一个 ssl 证书以供本地服务器使用
  • 修改 package 命令来快捷操作

最后吐槽一下 为啥我们项目的 storybook 开启的这么慢!

相关推荐
前端极客探险家3 小时前
Flutter vs React Native:跨平台移动开发框架对比
flutter·react native·react.js
大莲芒4 小时前
react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react17
前端·react.js·前端框架
木木黄木木6 小时前
html5炫酷3D文字效果项目开发实践
前端·3d·html5
Li_Ning216 小时前
【接口重复请求】axios通过AbortController解决页面切换过快,接口重复请求问题
前端
胡八一7 小时前
Window调试 ios 的 Safari 浏览器
前端·ios·safari
Dontla7 小时前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
再学一点就睡7 小时前
深拷贝与浅拷贝:代码世界里的永恒与瞬间
前端·javascript
CrimsonHu7 小时前
B站首页的 Banner 这么好看,我用原生 JS + 三大框架统统给你复刻一遍!
前端·javascript·css
Enti7c7 小时前
前端表单输入框验证
前端·javascript·jquery
拉不动的猪7 小时前
几种比较实用的指令举例
前端·javascript·面试