如何安装支持Magento 2.4.6的旧版Magento PWA及解决编译问题

一、识别与Magento 2.4.6兼容的PWA Studio版本 #

根据Magento官方兼容性矩阵，以下PWA Studio版本完全适配Magento 2.4.6：

• 13.1.0
• 13.2.0
• 14.0.0 ~ 14.0.3

优先推荐14.0.x系列，该版本包含更多Bug修复与功能优化；若需稳定过渡，13.1.0/13.2.0也是可靠选择。

二、正确安装兼容版本的步骤 #

前置环境要求 #

确保本地满足：

• Node.js 16.x 或 18.x（推荐18.x）
• npm 8.x+ 或 yarn 1.22.x+
• Magento 2.4.6已部署并启用GraphQL API

安装流程 #

1. 初始化PWA项目（以14.0.3为例）
   执行命令创建项目：

   npx @magento/create-pwa@14.0.3 my-pwa-project
   cd my-pwa-project
   

   若需安装13.1.0版本，替换版本号为13.1.0即可。

2. 配置Magento后端连接
   在项目根目录的.env文件中，修改参数指向你的Magento实例：

   MAGENTO_BACKEND_URL="https://你的Magento店铺域名.com"
   MAGENTO_GRAPHQL_URL="${MAGENTO_BACKEND_URL}/graphql"
   

3. 安装依赖并启动开发服务

   npm install
   npm run watch
   

   编译完成后，可通过http://localhost:10000访问PWA前端。

三、修复13.1.0版本的编译错误 #

你遇到的lg_grid-cols-[1fr,1fr,1fr]类找不到的错误，是该版本Venia UI组件与Tailwind CSS类名语法冲突导致的，有两种解决方式：

方案1：手动修改错误类名 #

1. 打开文件node_modules/@magento/venia-ui/lib/components/SavedPaymentsPage/savedPaymentsPage.module.css
2. 将第35行代码：

   composes: lg_grid-cols-[1fr,1fr,1fr] from global;
   

   替换为Tailwind支持的等效语法：

   composes: lg_grid-cols-3 from global;
   

   （lg_grid-cols-3与原代码效果一致，均为大屏下3列网格布局）

方案2：升级到高版本 #

该Bug已在13.2.0及后续版本中修复，直接升级到13.2.0或14.0.x兼容版本，可无需手动修改文件解决问题。

内容的提问来源于stack exchange，提问作者Naveen Illa