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

相关推荐
清粥油条可乐炸鸡6 分钟前
el-transfer穿梭框数据量过大的解决方案
前端·javascript
天天扭码7 分钟前
Trae 04.22 版本:前端学习者的智能成长助手
前端·trae
snakeshe10109 分钟前
深入解析React Hooks:useCallback与useMemo的原理与区别
前端
洋3310 分钟前
[纯原创无Ai] 我把React调教成vue的模样了
vue.js·react.js
听风吹等浪起10 分钟前
html5:从零构建经典游戏-扫雷游戏
前端·html·html5
独立开阀者_FwtCoder11 分钟前
TypeScript 是怎么工作的?一文带你深入编译器内部流程
前端·javascript·面试
独立开阀者_FwtCoder16 分钟前
前端自适应方案全面解析:打造多端适配的现代网页
前端·javascript·面试
万事胜意50726 分钟前
前端切换Tab数据缓存实践
前端
渣渣宇a26 分钟前
Three_3D_Map 中国多个省份的组合边界绘制,填充背景
前端·javascript·three.js
Anger重名了29 分钟前
🌟新手也能秒懂!协程如何让APP更丝滑?
前端