Vue.js Chrome扩展项目从Webpack迁移至Vite的技术求助

核心需求对应（基于原Webpack配置） #

你的项目核心需求包括：

• 从src/entry目录自动生成多入口，部分入口产出HTML文件，部分仅产出JS文件
• 根据环境变量复制对应manifest.{env}.json到dist并重命名为manifest.json
• 复制public目录资源到dist
• 输出文件名不添加哈希后缀
• 开发环境使用内联Sourcemap，生产环境关闭
• CSS保持内联，不单独提取

Vite配置实现 #

无需依赖过时插件，使用Vite官方插件和维护中的社区插件即可完成适配，步骤如下：

1. 安装依赖

npm install vite @vitejs/plugin-vue vite-plugin-static-copy cross-env -D

• @vitejs/plugin-vue：官方Vue 3适配插件，持续维护
• vite-plugin-static-copy：替代Webpack的copy插件，处理静态资源复制
• cross-env：跨平台统一设置环境变量

2. 编写vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { readdirSync } from 'fs'
import { viteStaticCopy } from 'vite-plugin-static-copy'

// 自动扫描src/entry生成多入口配置
function getEntries() {
  const entryDir = resolve(__dirname, 'src/entry')
  const files = readdirSync(entryDir)
  const entries = {}
  const htmlEntries = []

  files.forEach(file => {
    const ext = file.split('.').pop()
    const name = file.replace(`.${ext}`, '')
    // 注册所有入口文件为JS入口
    entries[name] = resolve(entryDir, file)
    // 仅为JS入口生成对应HTML（可根据需求调整规则）
    if (ext === 'js') {
      htmlEntries.push({
        filename: `${name}.html`,
        template: resolve(__dirname, 'public/index.html'),
        inject: true,
        entry: entries[name]
      })
    }
  })

  return { entries, htmlEntries }
}

const { entries, htmlEntries } = getEntries()
const isDevMode = process.env.NODE_ENV === 'development'

export default defineConfig({
  plugins: [
    vue(),
    // 复制manifest和public资源
    viteStaticCopy({
      targets: [
        {
          src: resolve(__dirname, `src/manifest.${process.env.NODE_ENV}.json`),
          dest: '.',
          rename: 'manifest.json'
        },
        {
          src: resolve(__dirname, 'public/**/*'),
          dest: '.'
        }
      ]
    })
  ],
  build: {
    rollupOptions: {
      input: entries,
      output: {
        // 保持输出文件名与入口名一致，无哈希
        entryFileNames: '[name].js',
        chunkFileNames: '[name].js',
        assetFileNames: '[name].[ext]'
      }
    },
    // Sourcemap配置对应原Webpack的devtool
    sourcemap: isDevMode ? 'inline' : false,
    // 禁用CSS代码分割，保持内联
    cssCodeSplit: false
  },
  server: {
    port: 3000,
    open: false // 按需设置是否自动打开浏览器
  }
})

3. 配置package.json脚本

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development vite",
    "build": "cross-env NODE_ENV=production vite build"
  }
}

关键适配说明 #

• 多入口处理：通过扫描src/entry目录自动生成入口配置，与原Webpack的pages逻辑对齐；可根据需求调整HTML生成规则（比如仅特定入口生成HTML）
• 静态资源复制：vite-plugin-static-copy替代copy-webpack-plugin，实现manifest和public资源的复制逻辑
• 输出格式：通过rollupOptions.output配置文件名规则，完全匹配原Webpack的输出格式
• CSS内联：cssCodeSplit: false对应原Webpack的css.extract: false，确保CSS内联到JS中
• Sourcemap：sourcemap配置直接对应原Webpack的devtool设置，开发环境用内联Sourcemap，生产环境关闭

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