解决方案: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 开启的这么慢!

相关推荐
Bellafu6663 小时前
selenium 常用xpath写法
前端·selenium·测试工具
blackorbird5 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者6 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强6 小时前
Chrome和IE获取本机ip地址
前端
天***88966 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*6 小时前
zabbix安装
linux·运维·前端·网络·zabbix
清羽_ls7 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友7 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵7 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
10年前端老司机8 小时前
Promise 常见面试题(持续更新中)
前端·javascript