Vue.js / Vite Proxy

Vue SPAs mit Vite benötigen einen Dev-Proxy für lokales Testen und einen Production-Proxy auf Webserver oder Backend.

Entwicklung (Vite)
Production

Vite Dev-Proxy konfigurieren

In vite.config.js oder vite.config.ts:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      "/cvs.js": {
        target: "https://usertrax.io",
        changeOrigin: true,
        secure: true,
      },
      "/api/usertrax/events": {
        target: "https://api.usertrax.io",
        changeOrigin: true,
        secure: true,
        rewrite: (path) => path.replace(/^\/api\/usertrax\/events/, "/api/events"),
      },
    },
  },
});

Script in index.html einbinden

<!doctype html>
<html lang="de">
  <head>
    <script>
      window.usertraxConfig = {
        endpoint: "/api/usertrax/events",
      };
    </script>
    <script
      src="/cvs.js"
      data-key="%VITE_USERTRAX_KEY%"
      defer
    ></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

In .env:

VITE_USERTRAX_KEY=ihr_public_key

Der Vite Dev-Proxy gilt nur lokal. Für Production eine dieser Optionen wählen:

Nginx / Caddy / Apache vor der gebauten SPA — siehe Nginx oder Caddy
Backend-Proxy (Laravel, Express) — siehe Laravel oder Express.js
Hosting-Rewrites (Netlify, Vercel) — analog zum Next.js-Rewrite-Ansatz

Die gebaute index.html nutzt dieselben geproxied Pfade:

<script>
  window.usertraxConfig = {
    endpoint: "/api/usertrax/events",
  };
</script>
<script src="/cvs.js" data-key="IHR_API_SCHLÜSSEL" defer></script>

Nutzung in Vue-Komponenten

Tracking funktioniert wie ohne Proxy — die Endpoint-Änderung ist transparent:

window.usertrax.push({
  event: "purchase",
  total: 99.99,
  currency: "EUR",
});

Details siehe Vite + Vue Integration.

Verifizierung

npm run dev (Entwicklung) oder mit Production-Proxy deployen
Network-Tab öffnen
Prüfen, dass cvs.js und Event-POSTs Ihre Domain nutzen

Fehlerbehebung

Dev ok, Production nicht: Vite-Proxy ist nur für Entwicklung — Production-Proxy separat konfigurieren
401 in Production: Production-Proxy muss X-Auth-Key weiterleiten