使用 create-react-app 进行 Vite 返回 404 错误

Question

我决定配置由 create-react-app 创建的 React 应用程序以开始使用 vite。在遵循一些文档之后，我配置了所需的文件。当我在应用程序的根目录中运行

vite

 时，它会运行，但不幸的是，由于 404 错误，我无法访问这些文件。奇怪的是，对于我的同事来说，它运行。当我更改为

react-scripts

时，它运行成功。以下是我的应用程序的一些配置：

vite.config.ts

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

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'build',
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "types": ["vite/client"],
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
}

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "vite",
    "start:debug": "vite --debug",
    "build:development": "tsc && vite build",
    "build:staging": "tsc && vite build --mode staging",
    "build:production": "tsc && vite build --mode production",
    "preview": "vite preview",
    "eslint": "eslint --ext .tsx,.ts src/",
    "eslint:fix": "eslint --fix --ext .tsx,.ts src/"
  },
  "dependencies": {
    "@azure/msal-browser": "^2.24.0",
    "@azure/msal-react": "^1.4.0",
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-regular-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.1.18",
    "react-data-table-component": "^7.5.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "^6.3.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "react-sliding-side-panel": "^2.0.3",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "@types/cors": "^2.8.12",
    "@types/node": "^16.11.41",
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.4",
    "@typescript-eslint/eslint-plugin": "^5.30.0",
    "@typescript-eslint/parser": "^5.30.0",
    "@vitejs/plugin-react": "^1.3.2",
    "@vitejs/plugin-react-refresh": "^1.3.6",
    "autoprefixer": "^10.4.7",
    "eslint": "^8.18.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-react": "^7.30.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.0",
    "typescript": "^4.7.4",
    "vite": "^2.9.13",
    "vite-plugin-svgr": "^2.2.0"
  },
  "engines": {
    "node": ">=16.0.0",
    "npm": ">=8.0.0"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

执行

npm start

后，命令行中返回如下内容：

vite v2.9.13 dev server running at:

> Local: http://localhost:3000/
> Network: use `--host` to expose

ready in 308ms.

尝试访问该地址的页面后，我收到 404，并且控制台中没有打印任何内容。

This localhost page can’t be foundNo webpage was found for the web address: 
http://localhost:3000/

HTTP ERROR 404

我已经尝试使用 vite 包通过 CLI 创建一个 React 应用程序，并且它成功了。我比较了有效项目的配置，但我找不到任何可以改变结果的差异。

如果我尝试访问一些

/public

资源，我可以。所以，vite 正在托管这个文件夹，但我猜由于某种原因，根目录中的 

index.html

 没有被构建。

我的项目结构可在

中找到

您对我的项目发生的情况有什么建议吗？ 谢谢！

编辑1

经过一些测试，我发现当我运行

vite build

 并使用 

serve

 托管构建的文件夹时，它可以工作。文件夹结构和资产均已正确生成。我认为这是实时重新加载或 

vite

 命令本身的问题。

编辑2

在构建文件夹中使用

vite preview

 也有效。

Answer 1

经过多次尝试，我决定使用 vite CLI 创建另一个项目，并一点一点地添加有问题的项目的部分内容。使用与其他项目相同的 CLI 创建项目后，通过神秘它继续工作。另一个项目仍然没有。因此，我决定清理两个项目的依赖关系并再次安装，但我得到了相同的结果。所以，我能看到的独特区别是项目的名称。

有问题的项目在存储库名称中存在一些空格，克隆此存储库后，文件夹名称将空格编码为

%20

 代码。通过手动将其移除，

vite

开始完美工作。将项目名称更改为再次具有

%20

后，

vite

不起作用。对我来说，这看起来很奇怪。

项目名称：

Project%20

index.html 路由结果'状态：404

项目名称：

Project

index.html 路由结果'状态：200

我会在vite项目中开票让维护人员检查一下，看看是否是一种bug。

编辑1

问题已打开：

https://github.com/vitejs/vite/issues/8904

Answer 2

如果您找到解决方案，请告诉我