使用React Vite创建新的Amplify项目无法发布网站。缺少构建文件夹

Question

我正在使用 React 创建一个新的 Amplify 项目。 过去，React 可以选择使用

npx create-react-app my-app

引导新的简单 React 应用程序。 此选项自 2023 年起已被弃用（参考此处和此处）

现在，我决定创建一个新的简单的 React 应用程序，而新的方法（现在有多种方法）是使用 Vite。

命令是：

npm create vite@latest my-react-app --template react

之后，我运行了命令：

cd my-react-app
npm install
npm run dev

但是，在使用

amplify add auth

添加身份验证并尝试推送和发布后，我收到了错误。

amplify push
amplify publish

我收到以下错误：

frontend build command exited with code 0
Publish started for S3AndCloudFront

Cannot find the distribution folder.
Distribution folder is currently set as:
  /Users/sample/IdeaProjects/StorageBrowser/my-react-app/build

🛑 Cannot find the distribution folder.

Resolution: Please report this issue at https://github.com/aws-amplify/amplify-cli/issues and include the project identifier from: 'amplify diagnose --send-report'
Learn more at: https://docs.amplify.aws/cli/project/troubleshooting/

看起来 Vite 创建了一个构建文件夹

dist

并且 Amplify 正在寻找一个

build

文件夹。
在哪里可以更改 Vite 中的构建文件夹？

Answer 1

您可以更改 Vite 配置文件：

vite.config.js

并添加构建输出目录。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    outDir: './build',
    emptyOutDir: true, // also necessary
  }
})