vue实现按目录打包

Vue 项目按目录打包的实现方法

Vue 项目默认通过 Webpack 或 Vite 进行打包，生成的文件通常集中在同一目录下。若需按目录结构分类打包输出文件，可通过以下方法实现：

修改打包输出路径

在 vue.config.js 中配置 outputDir 和 assetsDir，动态生成目录结构：

module.exports = {
  outputDir: 'dist',
  assetsDir: 'static',
  configureWebpack: {
    output: {
      filename: '[name]/js/[name].[hash].js',
      chunkFilename: '[name]/js/[name].[hash].js'
    }
  },
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => ({
        ...options,
        name: '[name]/img/[name].[hash:8].[ext]'
      }))
  }
}

动态生成多入口打包

若需为不同目录生成独立入口文件，可通过多入口配置实现：

const path = require('path')
module.exports = {
  pages: {
    admin: {
      entry: 'src/admin/main.js',
      template: 'public/admin.html',
      filename: 'admin/index.html',
      chunks: ['chunk-vendors', 'chunk-common', 'admin']
    },
    client: {
      entry: 'src/client/main.js',
      template: 'public/client.html',
      filename: 'client/index.html',
      chunks: ['chunk-vendors', 'chunk-common', 'client']
    }
  }
}

使用插件自定义输出结构

通过 copy-webpack-plugin 实现静态资源分类：

const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
  configureWebpack: {
    plugins: [
      new CopyPlugin({
        patterns: [
          { 
            from: 'src/assets/docs',
            to: 'docs/[name].[ext]' 
          }
        ]
      })
    ]
  }
}

Vite 项目的目录打包配置

若使用 Vite，在 vite.config.js 中配置：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[ext]/[name].[hash].[ext]',
        chunkFileNames: 'js/[name].[hash].js',
        entryFileNames: 'js/[name].[hash].js'
      }
    }
  }
})

注意事项

• 路径分隔符需兼容不同操作系统（建议使用 path.join()）
• 生产环境需测试 CDN 路径是否正确
• 路由配置需与打包目录结构匹配
• 静态资源引用需使用 require 或 import 确保正确解析路径

通过以上方法可实现 Vue 项目按目录结构打包，便于模块化管理和部署。