环境变量

您可以在 Storybook 中使用环境变量来改变其在不同“模式”下的行为。如果您提供一个以 STORYBOOK_ 为前缀的环境变量，当您使用 Webpack 时，它可以在 process.env 中获取；当您使用 Vite 构建器时，则可以在 import.meta.env 中获取。

STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook

切勿在 Storybook 中存储任何秘密（例如，私有 API 密钥）或其他敏感信息。环境变量会嵌入到构建中，这意味着任何人都可以通过检查您的文件来查看它们。

然后，我们可以在任何地方的预览 JavaScript 代码中像下面这样访问这些环境变量

console.log(process.env.STORYBOOK_THEME);
console.log(process.env.STORYBOOK_DATA_KEY);

您也可以通过替换 %STORYBOOK_X% 来在自定义的 <head>/<body> 中访问这些变量，例如：%STORYBOOK_THEME% 将被替换为 red。

如果在 JavaScript 中将环境变量用作属性或值，您可能需要添加引号，因为值将被直接插入，例如：<link rel="stylesheet" href="%STORYBOOK_STYLE_URL%" />。

使用 .env 文件

您还可以使用 .env 文件来改变 Storybook 在不同模式下的行为。例如，如果您在项目中添加一个 .env 文件，内容如下：

STORYBOOK_DATA_KEY=12345

然后，您可以随时随地访问此环境变量，即使在您的故事中也可以。

MyComponent.stories.ts|tsx

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { MyComponent } from './MyComponent';
 
const meta = {
  component: MyComponent,
} satisfies Meta<typeof MyComponent>;
 
export default meta;
type Story = StoryObj<typeof meta>;
 
export const ExampleStory: Story = {
  args: {
    propertyA: process.env.STORYBOOK_DATA_KEY,
  },
};

使用 Vite

开箱即用，Storybook 提供了一个 Vite 构建器，它不会输出像 process.env 这样的 Node.js 全局变量。要访问 Storybook 中的环境变量（例如，STORYBOOK_、VITE_），您可以使用 import.meta.env。例如：

MyComponent.stories.ts|tsx

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { MyComponent } from './MyComponent';
 
const meta = {
  component: MyComponent,
} satisfies Meta<typeof MyComponent>;
 
export default meta;
type Story = StoryObj<typeof meta>;
 
export const ExampleStory: Story = {
  args: {
    propertyA: import.meta.env.STORYBOOK_DATA_KEY,
    propertyB: import.meta.env.VITE_CUSTOM_VAR,
  },
};

您还可以为不同的模式使用特定的文件。添加 .env.development 或 .env.production 文件，为您的环境变量应用不同的值。

当您使用 build-storybook 构建您的 Storybook 时，您也可以传递这些环境变量。

然后它们将被硬编码到您的 Storybook 的静态版本中。

使用 Storybook 配置

此外，您可以扩展您的 Storybook 配置文件（即 .storybook/main.js|.ts），并提供一个配置字段，用于定义特定的变量（例如，API URL）。例如：

.storybook/main.ts

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  /*
   * 👇 The `config` argument contains all the other existing environment variables.
   * Either configured in an `.env` file or configured on the command line.
   */
  env: (config) => ({
    ...config,
    EXAMPLE_VAR: 'An environment variable configured in Storybook',
  }),
};
 
export default config;

当 Storybook 加载时，它将允许您在故事中访问它们，就像处理 env 文件一样。

MyComponent.stories.ts|tsx

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { MyComponent } from './MyComponent';
 
const meta = {
  component: MyComponent,
} satisfies Meta<typeof MyComponent>;
 
export default meta;
type Story = StoryObj<typeof meta>;
 
export const Default: Story = {
  args: {
    exampleProp: process.env.EXAMPLE_VAR,
  },
};

使用环境变量选择浏览器

Storybook 允许您选择要预览故事的浏览器。可以通过 .env 文件条目或直接在您的 storybook 脚本中进行设置。

下表列出了可用选项：

浏览器	示例
Safari	`BROWSER="safari"`
Firefox	`BROWSER="firefox"`
Chromium	`BROWSER="chromium"`

默认情况下，Storybook 会在其启动过程中打开一个新的 Chrome 窗口。如果您没有安装 Chrome，请确保包含以下选项之一，或相应地设置您的默认浏览器。

故障排除

环境变量不起作用

如果您尝试使用特定于框架的环境变量（例如 VUE_APP_），您可能会遇到问题，主要是因为 Storybook 和您的框架可能有特定的配置，并且可能无法识别和使用这些环境变量。如果您遇到类似情况，您可能需要调整您的框架配置，以确保它可以识别和使用这些环境变量。例如，如果您正在使用基于 Vite 的框架，您可以扩展配置文件并启用 envPrefix 选项。其他框架可能需要类似的方法。