vue项目配置vite打包输出文件夹（css，img，js，font）

在Vue项目中，使用Vite打包时，可以通过配置vite.config.js文件来指定输出文件夹。以下是一个配置示例，展示了如何设置CSS、图片、JavaScript和字体文件的输出目录：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
 
// 导出配置
export default defineConfig({
  plugins: [vue()],
  build: {
    // 输出路径
    outDir: 'dist',
    rollupOptions: {
      output: {
        // 分别设置各类资源的输出目录
        assetFileNames: (assetInfo) => {
          if (assetInfo.name === 'fonts') {
            return 'fonts/[name].[ext]';
          }
          if (assetInfo.name.endsWith('.css')) {
            return 'css/[name].[ext]';
          }
          if (assetInfo.name.includes('img/')) {
            return 'img/[name].[ext]';
          }
          // 其他资源
          return 'assets/[name].[ext]';
        },
      },
    },
  },
});

在这个配置中：

• outDir 指定了构建的输出目录为 dist。
• assetFileNames 函数定义了不同类型资源的输出文件名和目录。对于字体文件，它们被放置在 dist/fonts 文件夹内；CSS文件被放置在 dist/css 文件夹内；图片文件被放置在 dist/img 文件夹内。

确保在运行打包命令时（如 npm run build），Vite 会根据这些配置输出资源到对应的文件夹中。