第四章：生产构建

构建命令

# 构建
npm run build

# 预览构建结果
npm run preview

构建配置

基本配置

export default defineConfig({
  build: {
    outDir: 'dist',           // 输出目录
    assetsDir: 'assets',      // 静态资源目录
    sourcemap: true,          // 生成 sourcemap
    minify: 'terser',         // 压缩方式
    target: 'es2015'          // 目标版本
  }
})

代码分割

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

资源处理

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 入口文件名
        entryFileNames: 'js/[name]-[hash].js',
        // 代码块文件名
        chunkFileNames: 'js/[name]-[hash].js',
        // 静态资源文件名
        assetFileNames: (assetInfo) => {
          if (assetInfo.name.endsWith('.css')) {
            return 'css/[name]-[hash][extname]'
          }
          return 'assets/[name]-[hash][extname]'
        }
      }
    }
  }
})

环境区分

构建模式

# 开发模式构建
vite build --mode development

# 生产模式构建
vite build --mode production

环境变量

// vite.config.js
export default defineConfig(({ mode }) => {
  return {
    build: {
      sourcemap: mode === 'development'
    }
  }
})

小结

生产构建要点：

• 构建命令：npm run build
• 构建配置：outDir、sourcemap、minify
• 代码分割：manualChunks
• 资源处理：文件名配置
• 环境区分：mode 参数

下一章我们将学习插件系统。