React+TS项目Vite构建仅生成index.js，未产出标准输出求助

数据老陈

2026-6-28

问题

我有一个基于TypeScript的React项目，已从Webpack迁移至Vite并编写了对应配置文件。执行npm run build后，配置指定的./build/www目录仅生成index.js文件，而非Vite标准构建产出的index.html文件及assets文件夹。删除配置文件后构建结果正常，说明问题出在配置中，尝试过修改配置、搜索资料、借助AI工具均未解决，现求助排查。

以下是我的Vite配置文件及package.json内容：

vite.config.ts

/// <reference types="vitest" />
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import eslint from 'vite-plugin-eslint';
import { createHtmlPlugin } from 'vite-plugin-html';
import { VitePluginNode } from 'vite-plugin-node';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  build: {
    outDir: './build/www',
  },
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/test/setUpTests.ts',
    include: ['./src/test/**/*.test.{ts,tsx}'],
  },
  plugins: [
    VitePluginNode({
      adapter: 'express',
      appPath: './src/main/webapp/app/index.tsx',
    }),
    react(),
    eslint(),
    tsconfigPaths({
      root: './',
    }),
    createHtmlPlugin({
      minify: true,
      /**
       * If you want to store `index.html` in the specified folder, you can modify it, otherwise no configuration is required
       * @default index.html
       */
      template: 'index.html',

      /**
       * Data that needs to be injected into the index.html ejs template
       */
    }),
  ],
  resolve: {
    alias: [
      { find: '/app', replacement: '/src/main/webapp/app' },
      { find: '/static', replacement: '/src/main/webapp/static' },
      { find: '/i18n', replacement: '/src/main/webapp/i18n' },
    ],
  },
});

package.json

{
  "name": "",
  "version": "0.0.0",
  "private": true,
  "description": "",
  "license": "UNLICENSED",
  "type": "module",
  "scripts": {
    "build": "vite --config ./vite.config.ts build",
    "dev": "vite --config ./vite.config.dev.ts",
    "lint": "eslint . --ext .ts,.tsx",
    "lint:errors": "npm run lint --  --max-warnings 5",
    "lint:fix": "npm run lint -- --fix",
    "patch": "npx patch-package",
    "prettier:check": "prettier --check \"{,src/**/}*.{md,json,ts,tsx,css,scss,yml}\"",
    "prettier:format": "prettier --write \"{,src/**/}*.{md,json,ts,tsx,css,scss,yml}\"",
    "serve": "vite preview",
    "sonar": "sonar-scanner",
    "test": "vitest",
    "test:end": "npx playwright test",
    "test:end-ui": "npx playwright test --ui",
    "test:ui": "vitest --ui",
    "coverage": "vitest run --coverage"
  },
  "lint-staged": {
    "{,src/**/}*.{ts,tsx,css,scss}": [
      "prettier --write"
    ]
  },
  "dependencies": {
    "@exytab/react-sortable-tree": "^0.6.0",
    "@fortawesome/fontawesome-svg-core": "^6.2.1",
    "@fortawesome/free-regular-svg-icons": "^6.2.1",
    "@fortawesome/free-solid-svg-icons": "^6.2.1",
    "@fortawesome/react-fontawesome": "^0.1.19",
    "@popperjs/core": "^2.11.6",
    "@reduxjs/toolkit": "^1.9.5",
    "@testing-library/react": "^14.1.0",
    "@typescript-eslint/parser": "^5.55.0",
    "ajv": "^6.12.6",
    "axios": "^0.27.2",
    "bootstrap": "^5.2.3",
    "classnames": "^2.3.2",
    "date-fns": "^2.29.3",
    "dayjs": "^1.11.10",
    "diacritic": "0.0.2",
    "dom-to-image": "2.6.0",
    "dompurify": "^2.4.5",
    "lodash": "^4.17.21",
    "moment": "2.24.0",
    "monet": "^0.9.3",
    "patch-package": "^8.0.0",
    "postcss": "^8.4.23",
    "react": "^18.2.0",
    "react-beautiful-dnd": "^13.1.1",
    "react-cookie": "^4.1.1",
    "react-datepicker": "^4.16.0",
    "react-device-detect": "^2.2.2",
    "react-dnd": "^7.3.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.48.2",
    "react-icons": "^4.8.0",
    "react-jhipster": "^0.22.0",
    "react-loadable": "5.5.0",
    "react-loading": "2.0.3",
    "react-redux": "^7.2.8",
    "react-redux-loading-bar": "^5.0.4",
    "react-router-dom": "^5.2.0",
    "react-snowstorm": "0.0.3",
    "react-to-print": "^2.14.12",
    "react-toastify": "^6.2.0",
    "react-transition-group": "^4.4.5",
    "react-virtualized": "^9.22.4",
    "reactstrap": "^9.1.5",
    "recharts": "^2.7.2",
    "redux": "^4.2.0",
    "redux-promise-middleware": "^6.1.3",
    "redux-thunk": "^2.4.2",
    "reselect": "^4.1.7",
    "swagger-ui-react": "^4.12.0",
    "uuid": "^8.3.2",
    "vite-tsconfig-paths": "^4.2.0"
  },
  "devDependencies": {
    "@playwright/test": "^1.39.0",
    "@testing-library/jest-dom": "^6.1.4",
    "@trivago/prettier-plugin-sort-imports": "^4.2.0",
    "@types/jest": "^29.5.8",
    "@types/lodash": "4.14.164",
    "@types/node": "^14.18.63",
    "@types/react": "16.9.56",
    "@types/react-beautiful-dnd": "^13.1.4",
    "@types/react-dom": "16.9.9",
    "@types/react-redux": "7.1.11",
    "@types/react-router-dom": "5.1.6",
    "@types/swagger-ui-react": "^4.18.0",
    "@typescript-eslint/eslint-plugin": "^6.7.3",
    "@typescript-eslint/parser": "^6.7.3",
    "@vitejs/plugin-react": "^4.0.0",
    "@vitest/coverage-v8": "^0.34.6",
    "@zeit/eslint-config-node": "0.3.0",
    "acorn": "^7.4.1",
    "autoprefixer": "9.6.1",
    "axios-mock-adapter": "^1.20.0",
    "core-js": "3.1.4",
    "cross-env": "5.2.0",
    "eslint": "^8.53.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-simple-import-sort": "^10.0.0",
    "generator-jhipster": "^7.9.3",
    "husky": "3.0.0",
    "identity-obj-proxy": "3.0.0",
    "jsdom": "^22.1.0",
    "lint-staged": "10.5.1",
    "mini-css-extract-plugin": "0.7.0",
    "prettier": "^2.8.8",
    "redux-mock-store": "1.5.4",
    "rollup": "^3.23.0",
    "sass": "1.62.1",
    "sinon": "7.3.2",
    "sonar-scanner": "3.1.0",
    "swagger-ui": "2.2.10",
    "typescript": "4.9.5",
    "vite": "^4.3.9",
    "vite-plugin-eslint": "^1.8.1",
    "vite-plugin-html": "^3.2.0",
    "vite-plugin-node": "^3.0.2",
    "vite-plugin-singlefile": "^0.13.5",
    "vitest": "^0.34.6"
  },
  "engines": {
    "node": ">=8.9.0"
  },
  "cacheDirectories": [
    "node_modules"
  ]
}

问题根源与解决方案

问题出在**VitePluginNode插件**上，这个插件是用于构建Node.js后端服务（如Express应用）的，它会覆盖Vite默认的前端构建逻辑，将项目按照Node服务的方式打包为单个入口文件，完全忽略前端项目需要的HTML模板处理和静态资源打包流程。

你的项目是纯前端React应用，不需要这个插件，移除它即可恢复正常的Vite前端构建流程。

修改后的Vite配置文件

/// <reference types="vitest" />
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import eslint from 'vite-plugin-eslint';
import { createHtmlPlugin } from 'vite-plugin-html';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  build: {
    outDir: './build/www',
  },
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/test/setUpTests.ts',
    include: ['./src/test/**/*.test.{ts,tsx}'],
  },
  plugins: [
    react(),
    eslint(),
    tsconfigPaths({
      root: './',
    }),
    createHtmlPlugin({
      minify: true,
      template: 'index.html',
    }),
  ],
  resolve: {
    alias: [
      { find: '/app', replacement: '/src/main/webapp/app' },
      { find: '/static', replacement: '/src/main/webapp/static' },
      { find: '/i18n', replacement: '/src/main/webapp/i18n' },
    ],
  },
});

额外说明

若确实需要同时构建前端和后端服务，应拆分配置文件，为前后端分别编写独立的Vite配置，通过不同命令执行构建。
createHtmlPlugin插件可保留，它负责HTML模板的压缩和变量注入，不会影响正常前端构建流程。

内容的提问来源于stack exchange，提问作者jakub wytykowski

React+TS项目Vite构建仅生成index.js，未产出标准输出求助

vite.config.ts #

package.json #

修改后的Vite配置文件 #

额外说明 #

vite.config.ts

package.json

修改后的Vite配置文件

额外说明