如何用Vite在根路径提供静态文件？React+Ionic项目求指导

方案1：通过Vite构建配置自定义输出结构 #

利用Vite的build.rollupOptions可以直接控制输出文件的路径与名称，同时配置CSS提取规则：

1. 修改项目根目录的vite.config.ts文件：

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

export default defineConfig({
  plugins: [react(), vitePluginIonic()],
  build: {
    rollupOptions: {
      output: {
        // 指定JS文件输出路径和名称
        entryFileNames: 'static/js/bundle.js',
        // 单独处理CSS文件的输出路径
        assetFileNames: (assetInfo) => {
          if (assetInfo.name?.endsWith('.css')) {
            return 'static/styles/combined.css';
          }
          // 其他资源沿用默认命名规则
          return 'assets/[name].[hash][extname]';
        },
      },
      // 确保单入口打包合并为一个bundle
      input: {
        main: './src/main.tsx', // 替换为你的项目实际入口文件
      },
    },
    // 强制将所有CSS提取到单个文件（生产环境默认开启，开发环境需显式配置）
    cssCodeSplit: false,
  },
  // 开发服务器允许访问根目录下的static文件夹
  server: {
    fs: {
      allow: ['./static'],
    },
  },
});

2. 开发环境的适配处理：
   Vite开发环境默认不会生成物理文件，若路由需要访问这些文件，可选择两种方式：

• 手动在项目根目录创建static/styles/combined.css和static/js/bundle.js空文件，或复制生产构建后的文件到对应路径
• 使用vite-plugin-static-copy插件自动同步文件：
  先安装插件：

  yarn add vite-plugin-static-copy -D
  

  再在vite.config.ts中添加配置：

  import { viteStaticCopy } from 'vite-plugin-static-copy';
  
  export default defineConfig({
    // ...其他已有配置
    plugins: [
      // ...其他已有插件
      viteStaticCopy({
        targets: [
          {
            src: 'dist/static/styles/combined.css',
            dest: './static/styles',
          },
          {
            src: 'dist/static/js/bundle.js',
            dest: './static/js',
          },
        ],
        watch: {
          enable: true, // 开发环境下监听文件变化自动同步
        },
      }),
    ],
  });
  

  注意：需先执行一次yarn build生成生产文件，再启动开发服务器，插件会自动同步文件。

方案2：简单场景下的直接配置 #

如果你的项目只有单个入口，可简化配置直接指定资源输出结构：

export default defineConfig({
  build: {
    outDir: 'dist',
    assetsDir: 'static',
    rollupOptions: {
      output: {
        entryFileNames: 'js/bundle.js',
        assetFileNames: (assetInfo) => {
          if (assetInfo.name?.endsWith('.css')) {
            return 'styles/combined.css';
          }
          return '[name].[hash][extname]';
        },
      },
    },
  },
});

构建后会在dist/static/js/bundle.js和dist/static/styles/combined.css生成目标文件，开发时将static目录放在项目根目录即可被路由访问。

验证访问路径 #

确保你的路由中引用的路径为/static/styles/combined.css和/static/js/bundle.js，Vite开发服务器会自动将根路径映射到项目根目录，可正常访问这些文件。

内容的提问来源于stack exchange，提问作者Vergel Mañalac