构建输出目录结构控制

项目配置与基础使用

Vite.js 通过其配置文件 vite.config.js 提供高度灵活的构建选项。默认情况下，项目根目录下的 vite.config.js 会被自动加载。基本配置结构如下：

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  // 配置选项
})

常用基础配置包括开发服务器设置、构建选项和环境变量处理。例如设置开发服务器端口：

export default defineConfig({
  server: {
    port: 3000,
    open: true
  }
})

环境变量通过 .env 文件管理，Vite 自动加载 .env 文件中的变量：

# .env
VITE_API_URL=https://api.example.com

在代码中通过 import.meta.env.VITE_API_URL 访问：

const apiUrl = import.meta.env.VITE_API_URL

构建输出目录结构控制

Vite 默认构建输出目录为 dist，可以通过 build.outDir 修改：

export default defineConfig({
  build: {
    outDir: 'build'
  }
})

静态资源处理

静态资源默认会被复制到输出目录的根层级。通过 build.assetsDir 可以指定静态资源的子目录：

export default defineConfig({
  build: {
    assetsDir: 'static'
  }
})

这样配置后，所有静态资源会被放置在 dist/static 目录下。

文件哈希与命名

Vite 默认会对静态资源文件名添加哈希以支持长期缓存：

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

多页面应用目录结构

对于多页面应用，可以通过配置实现不同的目录结构：

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        admin: resolve(__dirname, 'admin/index.html')
      }
    }
  }
})

这样会生成两个入口点，分别对应不同的 HTML 文件。

自定义构建逻辑

通过 build.lib 选项可以构建库模式，控制输出格式和文件名：

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'lib/main.js'),
      name: 'MyLib',
      fileName: (format) => `my-lib.${format}.js`
    }
  }
})

路径别名配置

使用路径别名可以简化导入语句并影响构建输出：

import { resolve } from 'path'

export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, './src')
    }
  }
})

然后在代码中可以这样使用：

import Component from '@/components/Component.vue'

公共基础路径

部署到非根目录时需要配置 base 选项：

export default defineConfig({
  base: '/sub-path/'
})

这会影响所有资源引用的路径前缀。

构建目标配置

通过 build.target 可以指定构建输出的浏览器兼容性：

export default defineConfig({
  build: {
    target: 'es2015'
  }
})

代码拆分策略

Vite 支持多种代码拆分策略：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router'],
          utils: ['lodash', 'axios']
        }
      }
    }
  }
})

自定义 HTML 输出

通过插件可以完全控制 HTML 输出结构：

import { createHtmlPlugin } from 'vite-plugin-html'

export default defineConfig({
  plugins: [
    createHtmlPlugin({
      minify: true,
      inject: {
        data: {
          title: 'My App'
        }
      }
    })
  ]
})

环境特定配置

根据不同的环境加载不同的配置：

export default defineConfig(({ command, mode }) => {
  if (command === 'serve') {
    return {
      // 开发环境配置
    }
  } else {
    return {
      // 生产环境配置
    }
  }
})

构建产物分析

使用插件分析构建产物大小：

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    visualizer({
      open: true,
      filename: 'stats.html'
    })
  ]
})

源映射配置

控制源映射生成行为：

export default defineConfig({
  build: {
    sourcemap: true // 或 'inline'/'hidden'
  }
})

外部依赖处理

将某些依赖排除在构建之外：

export default defineConfig({
  build: {
    rollupOptions: {
      external: ['jquery']
    }
  }
})

多格式输出

同时生成多种模块格式：

export default defineConfig({
  build: {
    rollupOptions: {
      output: [
        { format: 'es', dir: 'dist/es' },
        { format: 'cjs', dir: 'dist/cjs' }
      ]
    }
  }
})

构建钩子

利用构建钩子进一步自定义行为：

export default defineConfig({
  plugins: [
    {
      name: 'custom-hooks',
      closeBundle() {
        // 构建完成后执行的操作
      }
    }
  ]
})

文件系统缓存

配置构建缓存位置：

export default defineConfig({
  cacheDir: './node_modules/.vite'
})

构建报告

生成构建大小报告：

export default defineConfig({
  build: {
    brotliSize: true,
    chunkSizeWarningLimit: 1000
  }
})

自定义中间件

开发服务器中添加自定义中间件：

export default defineConfig({
  server: {
    middlewareMode: true,
    configureServer(server) {
      server.middlewares.use((req, res, next) => {
        // 自定义中间件逻辑
      })
    }
  }
})

构建时间优化

通过配置减少构建时间：

export default defineConfig({
  optimizeDeps: {
    include: ['vue', 'vue-router']
  }
})

多环境变量文件

支持不同环境的变量文件：

.env.development
.env.production
.env.staging

Vite 会根据当前模式自动加载对应的环境文件。