在AWS Amplify部署Vite React应用失败，求排查方案

问题描述 #

我尝试将基于Vite构建的React应用部署到AWS Amplify，但构建失败。我的package.json配置如下：

{
  "name": "app",
  "author": "ashiqdey",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^7.2.6",
    "react-router": "^6.2.1",
    "react-router-dom": "^6.2.1",
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^2.1.0",
    "prettier": "^2.5.1",
    "vite": "^3.1.0"
  }
}

最初遇到vite: command not found错误，我在Amplify的yml配置文件中添加了npm i vite -g，但问题仍未解决，现在出现了新的错误（相关报错截图已附上）。请问哪里操作有误？

排查与解决方案 #

1. 修复package.json的语法错误 #

你的package.json存在JSON语法问题：

• scripts中"preview": "vite preview",末尾多了逗号
• dependencies中"react-router-dom": "^6.2.1",末尾也多了逗号

JSON不允许最后一个键值对后保留逗号，这会导致文件解析失败，进而中断依赖安装和命令执行。修正后的package.json如下：

{
  "name": "app",
  "author": "ashiqdey",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^7.2.6",
    "react-router": "^6.2.1",
    "react-router-dom": "^6.2.1"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^2.1.0",
    "prettier": "^2.5.1",
    "vite": "^3.1.0"
  }
}

2. 移除全局安装Vite的操作 #

全局安装Vite完全没必要，反而可能因环境变量、权限问题引发新错误。Amplify构建环境会自动安装devDependencies中的包，包括Vite。你需要：

• 删除yml配置里的npm i vite -g命令
• 直接使用npm run build（npm会自动从node_modules/.bin目录找到本地Vite执行），或者显式调用npx vite build

3. 检查Amplify构建配置 #

确保amplify.yml的构建流程正确，示例配置如下：

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

注意：Vite默认构建产物在dist目录，所以baseDirectory必须设为dist；如果你的Vite配置修改了输出目录，要同步调整此处路径。

4. 新错误排查方向 #

如果修正以上问题后仍报错，结合截图重点看：

• 依赖安装失败：检查网络连接或包版本兼容性
• 构建命令报错：查看Vite具体错误信息，排查代码语法、路径配置问题
• 环境权限：若应用需访问AWS服务，确认Amplify角色有对应权限

内容的提问来源于stack exchange，提问作者Ashiq Dey