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

Question

我决定配置由 create-react-app 创建的 React 应用程序以开始使用 vite。在遵循一些文档之后，我配置了所需的文件。当我vite在应用程序的根目录中运行时，它会运行，但不幸的是，由于 404 错误，我无法访问这些文件。奇怪的是，对于我的同事来说，它运行。当我更改为react-scripts它时，它运行成功。以下是我的应用程序的一些配置：

\n

vite.config.ts

\n

import { defineConfig } from \'vite\'\nimport react from \'@vitejs/plugin-react\'\nimport path from \'path\'\n\nexport default defineConfig({\n  plugins: [react()],\n  build: {\n    outDir: \'build\',\n  },\n  resolve: {\n    alias: {\n      \'@\': path.resolve(__dirname, \'src\'),\n    },\n  },\n})\n

\n

tsconfig.json

\n

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

\n

package.json

\n

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

\n

执行后npm start，它在命令行中返回以下内容：

\n

vite v2.9.13 dev server running at:\n\n> Local: http://localhost:3000/\n> Network: use `--host` to expose\n\nready in 308ms.\n

\n

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

\n

This localhost page can\xe2\x80\x99t be foundNo webpage was found for the web address: \nhttp://localhost:3000/\n\nHTTP ERROR 404\n

\n

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

\n

如果我尝试访问某些/public资源，我就可以。所以，vite 正在托管这个文件夹，但index.html我猜由于某种原因，根目录没有被构建。

\n

我的项目的结构在此图中可用

\n

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

\n

编辑1

\n

经过一些测试，我发现当我使用 运行vite build并托管构建的文件夹时serve，它可以工作。文件夹结构和资产均已正确生成。我认为这与实时重新加载或vite命令本身有关。

\n

编辑2

\n

在构建文件夹中使用vite preview也有效。

\n

Answer 1

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

有问题的项目在存储库名称中存在一些空格，克隆此存储库后，文件夹名称将空格编码为%20代码。用手将其取下，vite开始完美工作。将项目名称更改为再次后%20，vite不起作用。对我来说，这看起来很奇怪。

项目名称：Project%20 index.html 路由结果'状态：404

项目名称：Project index.html 路由结果'状态：200

我将在 vite 项目中开一张票，让维护人员检查一下，看看它是否是一种错误。

编辑1

问题已打开： https: //github.com/vitejs/vite/issues/8904