将使用 Vite 制作的 React/Typescript 项目的前端移动到“客户端”文件夹后，如何让“npm run dev”工作？

Question

我正在使用 Vite 制作一个前端 React/Typescript 项目并尝试设置它，这样我就可以开始添加一个后端，这样它就可以成为一个 MERN 项目。我将所有前端文件放入“客户端文件夹”，然后创建一个单独的“服务器”文件夹，目前该文件夹是空的。

我只是想在继续之前确保前端的一切正常工作，但它告诉我即使在我的 localhost:3000 上找到网页也有错误，当我使用“npm run dev”时，这就是我正在做的到现在。

以下是我重新配置“vite.config.ts”文件的方式：

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

// https://vitejs.dev/config/
export default defineConfig({
  root: './client',
  base: '/',
  plugins: [react()],
  server: {
    port: 3000
  }
})

这是客户端文件夹中的 package.json 目前的样子：

{
  "name": "vite-number-conversion",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.7.1",
    "react-router-dom": "^6.8.1"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^3.1.0",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.7",
    "typescript": "^4.9.3",
    "vite": "^4.1.0"
  }
}

我猜这主要是我需要处理的 package.json，但我不清楚我应该做什么。任何建议表示赞赏！

Answer 1

在客户端文件夹中，确保有以下文件：vite.config.ts,idnex.html,package.json.

删除 vite.config.ts 的根和基：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  }
})

并执行 npm run dev.