SSR 构建配置

SSR 构建需要特殊配置，处理依赖外部化和构建输出。

SSR 配置选项

export default defineConfig({
  ssr: {
    // 不外部化的依赖
    noExternal: ['vue-router', 'pinia'],
    // 外部化的依赖
    external: ['express', 'fs-extra'],
    // 目标环境
    target: 'node'
  }
})

配置选项说明

注意：noExternal 的依赖会被打包处理，external 的依赖保持 require/import 引用。

依赖外部化策略

export default defineConfig({
  ssr: {
    // 默认外部化所有 node_modules
    noExternal: [
      // 特定依赖不外部化
      'vue-router',
      // 正则匹配
      /^@company\//
    ]
  }
})

SSR 构建命令

# 构建客户端
vite build --outDir dist/client

# 构建服务端
vite build --ssr --outDir dist/server

双端构建产物

dist/
├── client/         # 客户端构建产物
│   ├── index.html
│   └── assets/
└── server/         # 服务端构建产物
    └── server.js

SSR 模式判断

// 判断 SSR 环境
if (import.meta.env.SSR) {
  // 服务端代码
} else {
  // 客户端代码
}

构建配置示例

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        // 多入口配置
        client: '/src/entry-client.js',
        server: '/src/entry-server.js'
      }
    }
  },
  ssr: {
    target: 'node',
    noExternal: ['vue', 'vue-router']
  }
})

要点总结

• ssr.noExternal 控制依赖打包
• 双端构建分别输出 client/server
• import.meta.env.SSR 判断环境
• target 指定服务端运行环境