Vite构建后复制文件至WordPress目录及修改哈希文件名方法咨询

一、实现Vite构建后自动复制文件 #

方案1：用vite-plugin-copy插件（推荐） #

先安装插件：

npm install vite-plugin-copy --save-dev

在vite.config.js里配置，指定钩子为writeBundle（构建完成、文件写入磁盘后执行）：

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

export default defineConfig({
  plugins: [
    vue(),
    copy({
      targets: [
        {
          src: path.resolve(__dirname, 'dist/**/*'), // 匹配dist下所有文件
          dest: path.resolve(__dirname, '../wordpress project/target') // WP的target目录
        }
      ],
      hook: 'writeBundle', // 核心：确保构建完成后再复制
      overwrite: true // 覆盖目标目录已有文件
    })
  ]
})

方案2：自定义Vite钩子（无需额外插件） #

直接在配置里用buildEnd钩子，结合fs-extra处理复制（需先安装npm install fs-extra --save-dev）：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import fs from 'fs-extra'
import path from 'path'

export default defineConfig({
  plugins: [
    vue(),
    {
      name: 'post-build-copy',
      async buildEnd() {
        const distDir = path.resolve(__dirname, 'dist')
        const targetDir = path.resolve(__dirname, '../wordpress project/target')
        
        try {
          await fs.copy(distDir, targetDir, { overwrite: true })
          console.log('Vite构建文件已成功复制到WP目录！')
        } catch (err) {
          console.error('复制失败:', err)
        }
      }
    }
  ]
})

二、修改Vite构建生成固定文件名（移除哈希） #

在vite.config.js的build.rollupOptions.output里配置命名规则：

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

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        // 入口JS文件固定名称
        entryFileNames: 'js/vite-app.js',
        // 静态资源命名：单独给CSS指定固定名称，其他资源按需处理
        assetFileNames: ({name}) => {
          if (name?.endsWith('.css')) {
            return 'css/vite-app-styles.css'
          }
          // 图片、字体等资源可保留哈希，避免缓存问题
          return 'assets/[name].[hash][extname]'
        },
        // 分包文件如果存在，也可以设置固定名称
        chunkFileNames: 'js/vite-chunk.js'
      }
    },
    // 可选：如果项目只有一个CSS文件，关闭CSS代码分割更稳妥
    cssCodeSplit: false
  }
})

如果项目结构简单，也可以直接写死所有资源的固定名称，但要注意多资源会覆盖的问题，按需调整即可。

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