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

相关推荐
哆啦A梦158816 分钟前
搜索页面布局
前端·vue.js·node.js
_院长大人_41 分钟前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD42 分钟前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui
哆啦A梦15882 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫2 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo2 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li3 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
爱看书的小沐3 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
浪裡遊4 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
罚时大师月色5 小时前
Vue+ts 如何实现父组件和子组件通信
javascript·vue.js·ecmascript