Vue Storefront Magento 2 集成项目教程

1. 项目的目录结构及介绍

Vue Storefront Magento 2 集成项目包含了以下目录和文件结构：

.
├── .changeset
├── .github
├── .husky
├── .vuestorefrontcloud/
│   ├── docker/
│   └── docs
├── docs
├── packages
├── scripts
├── .all-contributorsrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .gitpod.yml
├── .graphqlconfig.example
├── .lintstagedrc
├── .ncurc.json
├── .node-version
├── README.md
├── codegen.yml
├── lerna.json
├── package.json
├── turbo.json
└── yarn.lock

• .changeset：用于管理项目中的变更集。
• .github：包含项目的GitHub工作流程和模板。
• .husky：用于配置Husky，一个本地git钩子工具，用于在提交代码前执行脚本。
• .vuestorefrontcloud/：包含与Vue Storefront Cloud相关的配置和脚本。
• docker/：包含Docker配置文件。
• docs/：项目的文档目录。
• packages/：项目的主要代码包。
• scripts/：包含项目的脚本文件。
• .all-contributorsrc：用于配置all Contributors工具，自动添加贡献者到README。
• .editorconfig：用于定义代码编辑器的配置。
• .eslintrc.js：ESLint的配置文件。
• .gitignore：定义Git应该忽略的文件和目录。
• .gitpod.yml：Gitpod的配置文件，用于在线开发环境。
• .graphqlconfig.example：GraphQL配置文件的示例。
• .lintstagedrc：用于配置lint-staged，它运行在git的pre-commit钩子中。
• .ncurc.json：NPM的配置文件。
• .node-version：指定项目使用的Node.js版本。
• README.md：项目的自述文件。
• codegen.yml、lerna.json、package.json、turbo.json、yarn.lock：项目的配置和依赖文件。

2. 项目的启动文件介绍

项目的启动文件是middleware.js，它用于启动Vue Storefront中间件服务。以下是middleware.js的基本结构：

import { createServer } from '@vue-storefront/middleware';
import { integrations } from './middleware.config.js';
import cors from 'cors';

(async () => {
  const app = await createServer({ integrations });
  const host = process.argv[2] ?? '0.0.0.0';
  const port = process.argv[3] ?? 8181;
  
  // 配置CORS
  const CORS_MIDDLEWARE_NAME = 'corsMiddleware';
  const corsMiddleware = app._router.stack.find((middleware) => middleware.name === CORS_MIDDLEWARE_NAME);
  corsMiddleware.handle = cors({
    origin: ['http://localhost:3000', ...(process.env.MIDDLEWARE_ALLOWED_ORIGINS?.split(',') ?? [])],
    credentials: true,
  });

  // 启动服务
  app.listen(port, host, () => {
    console.log(`Middleware started: ${host}:${port}`);
  });
})();

3. 项目的配置文件介绍

项目的配置文件是middleware.config.js，它定义了Vue Storefront中间件的配置。以下是middleware.config.js的基本结构：

import { config } from 'dotenv';
config();

const cookieNames = {
  currencyCookieName: 'vsf-currency',
  countryCookieName: 'vsf-country',
  localeCookieName: 'vsf-locale',
  cartCookieName: 'vsf-cart',
  customerCookieName: 'vsf-customer',
  storeCookieName: 'vsf-store',
  messageCookieName: 'vsf-message',
};

export const integrations = {
  magento: {
    location: '@vue-storefront/magento-api/server',
    configuration: {
      api: process.env.VSF_MAGENTO_GRAPHQL_URL,
      cookies: { ...cookieNames },
      cookiesDefaultOpts: {
        httpOnly: process.env.VSF_COOKIE_HTTP_ONLY || false,
        secure: process.env.VSF_COOKIE_SECURE || false,
        sameSite: process.env.VSF_COOKIE_SAME_SITE || 'lax',
        path: process.env.VSF_COOKIE_PATH || '/',
      },
      defaultStore: 'default',
      customApolloHttpLinkOptions: {
        useGETForQueries: true,
      },
      magentoBaseUrl: process.env.VSF_MAGENTO_BASE_URL,
      magentoApiEndpoint: process.env.VSF_MAGENTO_GRAPHQL_URL,
      imageProvider: process.env.NUXT_IMAGE_PROVIDER,
      recaptcha: {
        isEnabled: process.env.VSF_RECAPTCHA_ENABLED === 'true',
        sitekey: process.env.VSF_RECAPTCHA_SITE_KEY,
        secretkey: process.env.VSF_RECAPTCHA_SECRET_KEY,
        version: process.env.VSF_RECAPTCHA_VERSION,
        score: process.env.VSF_RECAPTCHA_MIN_SCORE,
      },
      customer: {
        customer_create_account_confirm: true,
      },
    },
  },
};

配置文件中包含了与环境变量相关的配置项，如Magento的GraphQL URL、Cookie名称和选项等。这些配置项可以通过.env文件来设置。