使用更新的目录结构为 Web 应用程序部署配置 ViteJS：Vercel 部署时出错

Question

我正在使用 ViteJS、HTML、Tailwind CSS 和 JavaScript 进行 Web 开发项目。我决定更新项目目录结构，但我在配置 Vite 和使用新结构部署应用程序时遇到了问题。

将 package.json 文件移动到“frontend”目录后，Vite 和所有相关的包脚本都已搬迁。我可以通过导航到“前端”目录并运行“npm run build”在本地构建和预览项目。但是，当我将更改推送到 GitHub 并尝试在 Vercel 上重新部署时，出现错误。

我不确定是否应该将 Vite、构建脚本和后端依赖项安装在项目的根目录下，或者我是否遗漏了一个步骤。

原结构：

├── node_modules
    └── ...
├── public
    └── ...
├── src
    ├── common
        └── ...
    ├── components
        └── ...
    ├── hoc
        └── ...
    ├── styles
        └── ...
    ├── utils
        └── ...
    ├── App.jsx
    ├── index.css
    ├── main.jsx
    └── styles.js
├── .env
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
├── post.css.config.cjs
├── README.md
├── tailwin.config.cjs
└── vite.config.js

新结构：

├── backend
    └──server.js
├── frontend
    ├── node_modules
        └── ...
    ├── public
        └── ...
    ├── src
        ├── common
            └── ...
        ├── components
            └── ...
        ├── hoc
            └── ...
        ├── styles
            └── ...
        ├── utils
            └── ...
        ├── App.jsx
        ├── index.css
        ├── main.jsx
        └── styles.js
    ├── .gitignore
    ├── index.html
    ├── package-lock.json
    ├── package.json <--- Vite build scripts live here
    ├── post.css.config.cjs
    ├── README.md
    ├── tailwin.config.cjs
    └── vite.config.js
├── node_modules
  └── ...
├── .env
├── .gitignore
├── package-lock.json
├── package.json
└── README.md

前端脚本

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "host": "vite --host",
    "preview": "vite preview --port 8080",
    "build-css": "node-sass src/styles/custom.scss src/styles/custom.css"
  },

具体来说，我已经将 package.json 文件移动到“frontend”目录，该目录已经重新定位了 Vite 和所有相关的包脚本。我可以通过导航到“前端”目录并运行“npm run build”在本地构建和预览项目。然而，在将更改推送到 GitHub 并尝试在 Vercel 上重新部署时，我遇到了一个错误。

Vercel 错误

sh: vite: command not found
Error: Command "vite build" exited with 127
BUILD_UTILS_SPAWN_127: Command "vite build" exited with 127

vite.config.js

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

dns.setDefaultResultOrder('verbatim')
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());

  return {
    plugins: [react()],
    server: {
      port: 3000
    },
    define: {
      'process.env': env,
    },
    build: {
      outDir: './dist',
      emptyOutDir: true
    }
  };
});

我不确定是否应该在项目的根目录下安装 Vite、构建脚本和后端依赖项，或者配置过程中是否缺少特定步骤。对于新手问题，我深表歉意，但我正在寻求解决此问题并提高我的开发技能的指导。

任何帮助将不胜感激。谢谢！

Answer 1

盯着我的代码和挠头几个小时后，我意识到答案就在我的眼皮底下——或者更确切地说，就在 Vercel 设置中。我的目录重组问题的解决方案就像更新常规设置下的“根目录”字段一样简单。

对于那些像我一样迷失在子目录海洋中的人，此字段指定您的代码在项目中的位置。在我的例子中，我需要将它设置为我的项目的根目录，该目录位于

frontend

相对路径中。

所以不要像我一样，伙计们。记住始终检查您的设置before你开始为甚至不是问题的代码撕扯你的头发。