## Build Configuration

### Common Vite Configuration
```typescript
// vite.config.common.mts
export async function createBuildConfig(mode: string) {
  const isCapacitor = mode === "capacitor";
  
  return defineConfig({
    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            'vue-vendor': ['vue', 'vue-router', 'vue-facing-decorator']
          }
        }
      }
    },
    define: {
      __USE_QR_READER__: JSON.stringify(!isCapacitor),
      __IS_MOBILE__: JSON.stringify(isCapacitor),
    },
    optimizeDeps: {
      include: [
        '@capacitor-mlkit/barcode-scanning',
        'vue-qrcode-reader'
      ]
    },
    resolve: {
      alias: {
        '@capacitor/app': path.resolve(__dirname, 'node_modules/@capacitor/app')
      }
    }
  });
}
```

### Web-Specific Configuration
```typescript
// vite.config.web.mts
import { defineConfig, mergeConfig } from "vite";
import { createBuildConfig } from "./vite.config.common.mts";

export default defineConfig(async () => {
  const baseConfig = await createBuildConfig('web');
  
  return mergeConfig(baseConfig, {
    define: {
      __USE_QR_READER__: true,
      __IS_MOBILE__: false,
    }
  });
});
```

### Capacitor-Specific Configuration
```typescript
// vite.config.capacitor.mts
import { defineConfig, mergeConfig } from "vite";
import { createBuildConfig } from "./vite.config.common.mts";

export default defineConfig(async () => {
  const baseConfig = await createBuildConfig('capacitor');
  
  return mergeConfig(baseConfig, {
    define: {
      __USE_QR_READER__: false,
      __IS_MOBILE__: true,
    },
    build: {
      rollupOptions: {
        external: ['vue-qrcode-reader'], // Exclude web QR reader from mobile builds
        output: {
          entryFileNames: '[name]-mobile.js',
          chunkFileNames: '[name]-mobile.js',
          assetFileNames: '[name]-mobile.[ext]'
        }
      }
    }
  });
});
```

### Build Scripts
Add these scripts to your `package.json`:
```json
{
  "scripts": {
    "build:web": "vite build --config vite.config.web.mts",
    "build:capacitor": "vite build --config vite.config.capacitor.mts",
    "build:all": "npm run build:web && npm run build:capacitor"
  }
}
```

### Environment Variables
Create a `.env` file:
```bash
# QR Scanner Configuration
VITE_QR_SCANNER_ENABLED=true
VITE_DEFAULT_CAMERA=back
```

### Build Process

1. **Web Build**
```bash
npm run build:web
```
This will:
- Include vue-qrcode-reader
- Set __USE_QR_READER__ to true
- Set __IS_MOBILE__ to false
- Build for web browsers

2. **Capacitor Build**
```bash
npm run build:capacitor
```
This will:
- Exclude vue-qrcode-reader
- Set __USE_QR_READER__ to false
- Set __IS_MOBILE__ to true
- Build for mobile platforms

3. **Build Both**
```bash
npm run build:all
```

### Important Notes

1. **Dependencies**
- Ensure all QR-related dependencies are properly listed in package.json
- Use exact versions to avoid compatibility issues
- Consider using peer dependencies for shared libraries

2. **Bundle Size**
- Web build includes vue-qrcode-reader (~100KB)
- Mobile build includes @capacitor-mlkit/barcode-scanning (~50KB)
- Consider using dynamic imports for lazy loading

3. **Platform Detection**
- Build flags determine which implementation to use
- Runtime checks provide fallback options
- Environment variables can override defaults

4. **Performance**
- Mobile builds optimize for native performance
- Web builds include necessary polyfills
- Chunk splitting improves load times

5. **Debugging**
- Source maps are enabled for development
- Build artifacts are properly named for identification
- Console logs help track initialization