Kā pievienot i18n Lovable lietotnei, kas veidota uz Vite bāzes?

Labākais veids, kā lokalizēt Lovable lietotni, kas veidota uz klasiskā Vite steka, ir ekstraktēt jūsu burtiski rakstītos tekstus iesūtītos Lingui PO katalogos, nevis piestiprināt izpildlaika tulkošanas rīku. Jūsu Lovable lietotne ir klientpusē renderēta React SPA, tāpēc nav servera renderēšanas, pie kā piesaistīties, un noturīgākais risinājums ir tulkošanas faili, kas atrodas jūsu pašu repozitorijā un tiek iekļauti jūsu build procesā. globalize.now ir mākslīgā intelekta darbināma lokalizācijas infrastruktūra, kas veic šo ekstrakciju un uztur šos katalogus sinhronizētus pie katra Git push, tāpēc jūs to iestatāt vienreiz un nekad vairs manuāli neapstrādājat lokalizācijas failus.

---

Kurā stekā darbojas jūsu Lovable lietotne — klasiskajā Vite vai TanStack Start?

Vispirms atveriet savu failu koku, jo Lovable piedāvā divus dažādus stekus, un katram ir vajadzīgs cits i18n iestatījums. Ja redzat src/pages/Index.tsx, src/main.tsx un vite.config.ts, jūs atrodaties uz klasiskā Vite un React SPA steka, kas ir Lovable noklusējuma izvēle. Savukārt TanStack Start projektos ir src/routes/, src/router.tsx, src/routeTree.gen.ts un src/server.ts.

Steks tiek izvēlēts projekta izveides brīdī, un pēc tam to vairs nevar mainīt, tāpēc šis lēmums jau ir pieņemts jūsu vietā. Klasiskais Vite steks pilnībā renderējas pārlūkprogrammā un pēc noklusējuma neveic datu ielādi servera pusē. Šis ceļvedis apraksta tieši šo klasisko Vite SPA. Ja jūsu faili atbilst TanStack Start struktūrai, tā vietā sekojiet mūsu TanStack Start i18n ceļvedim Lovable lietotnēm, jo servera puses renderēšana maina to, kā tiek ielādēti tulkojumi.

---

Kāpēc Vite SPA veidotas Lovable lietotnes i18n rīki mēdz apiet?

Tas notika, jo rīku ekosistēmas uzmanība pārcēlās uz Lovable jaunāko TanStack Start steku ar SSR pēc noklusējuma, atstājot klasisko Vite SPA bez pietiekama atbalsta — lai gan tas joprojām ir visbiežāk lietotais Lovable steks. Pēdējo mēnešu laikā lokalizācijas rīki, kas orientēti uz Lovable, tostarp Lovalingo, Intlayer un Paraglide, visi pārorientēja savus ceļvežus uz TanStack Start ar servera pusē renderēšanu.

Tā rezultātā rodas robs. Klienta pusē renderētam SPA ir reāli ierobežojumi, kurus SSR ceļveži ignorē: nav servera renderēšanas, kas varētu iepriekš iestrādāt tulkoto saturu, viss pakotnes kods tiek ielādēts pārlūkā, un jebkurš vēlāk ielādēts skripts pārkrāsos virsū angļu valodas saskarni. Labā ziņa ir tā, ka klasiskajam stekam ir skaidrs, labi atbalstīts risinājums, par kuru lielākā daļa izstrādātāju nekad nav dzirdējusi, jo skaļākie rīki ir aizņemti ar cita steka apsteigšanu.

---

Kāda ir atšķirība starp repozitorijā iekļautiem katalogiem un izpildlaika tulkošanas logrīku?

Repozitorijā iekļauti katalogi ir tulkošanas faili, kas ir iekļauti (commit) jūsu repozitorijā un iebūvēti pakotnē kompilēšanas laikā, savukārt izpildlaika logrīks ir trešās puses skripts, kas apmaina tekstu pārlūkā pēc tam, kad jūsu angļu valodas saskarne jau ir ielādēta. Šī atšķirība nosaka trīs būtiskas lietas Vite SPA gadījumā.

Pirmkārt, satura pazibēšana un izkārtojuma nobīde: logrīks vispirms parāda angļu valodu, tad to pārraksta, tāpēc lietotāji redz redzamu apmaiņu, un izkārtojums var pēkšņi nobīdīties. Repozitorijā iekļauti katalogi jau pirmajā renderēšanā parāda pareizo valodu. Otrkārt, indeksējamība: teksti, kas tiek iebūvēti kopā ar jūsu pakotni, ir daļa no jūsu koda, savukārt logrīka teksts tiek iestrādāts vēlāk, un rāpuļprogrammām to ir grūtāk nolasīt. Treškārt, piederība: repozitorijā iekļauti katalogi ir jūsu faili jūsu repozitorijā, tāpēc nekam ārējam nav jāpaliek tiešsaistē, lai jūsu lietotne turpinātu runāt vācu vai japāņu valodā.

---

Kā pievienot i18n Lovable Vite lietotnei, izmantojot Lingui?

Pievienojiet Lingui kā savu i18n slāni, ietveriet savus tekstus un ļaujiet tā Vite spraudnim kompilēt katalogus. Lingui ir vienkāršs i18n ietvars ar dedicētu Vite spraudni un uz PO balstītu katalogu formātu — tieši tas, kas nepieciešams klienta pusē renderētam SPA.

Vispirms instalējiet pakotnes. Lingui sadala savu CLI, Vite spraudni un React izpildlaika bibliotēku atsevišķās pakotnēs:

npm install --save-dev @lingui/cli @lingui/vite-plugin @rolldown/plugin-babel
npm install @lingui/core @lingui/react

Tālāk reģistrējiet spraudni vite.config.ts un pievienojiet lingui.config.ts, kas norāda uz jūsu avota un lokalizācijas mapēm:

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { lingui } from "@lingui/vite-plugin";

export default defineConfig({
  plugins: [react(), lingui()],
});

// lingui.config.ts
import { defineConfig } from "@lingui/cli";

export default defineConfig({
  locales: ["en", "de", "fr"],
  sourceLocale: "en",
  catalogs: [
    {
      path: "src/locales/{locale}/messages",
      include: ["src"],
    },
  ],
});

Tad ietveriet savus burtiski ievietotos JSX tekstus Trans makro, nevis atstājiet kā vienkāršus tekstus:

// before
<h1>Create your account</h1>

// after
import { Trans } from "@lingui/react/macro";
<h1><Trans>Create your account</Trans></h1>

Tagad veiciet ekstrakciju. CLI pārskata jūsu src direktoriju un ieraksta PO katalogu katrai lokalizācijai, piemēram, src/locales/en/messages.po:

npx lingui extract

Aizpildiet msgstr laukus katrai valodai vai nododiet šo posmu automatizētam slānim (skatiet nākamo sadaļu). Nav nepieciešams palaist atsevišķu kompilēšanas komandu, jo @lingui/vite-plugin kompilē PO katalogus lidojot izstrādes un veidošanas laikā.

Beigās pievienojiet valodas pārslēdzēju, aktivizējot lokalizāciju izpildlaikā:

import { i18n } from "@lingui/core";
i18n.activate("de");

Tas ir viss cikls klasiskajam Vite stekam: instalēt, ietvert, ekstrahēt, tulkot, pārslēgt. Viss, izņemot tulkojumus pašus, atrodas jūsu repozitorijā.

---

Kā globalize.now automatizē šo procesu ar katru push?

globalize.now atceļ nepieciešamību manuāli veikt ekstrakciju un aizpildīšanu, jo tas seko jūsu repozitorijam un dara to jūsu vietā ar katru Git push. Tas atrod jaunus burtiski ievietotus tekstus jūsu Lovable kodā, izveido atslēgas un PO ierakstus, kādus sagaida Lingui, izveido tulkojumus un iesniedz atjauninātos katalogus atpakaļ repozitorijā, tāpēc jūsu src/locales mape vienmēr ir aktuāla, un jums nav nepieciešams palaist nevienu komandu.

Savienojiet repozitoriju globalize.now vienreiz, un tas sāks sekot izmaiņām. Lai to iestatītu tieši no redaktora, instalējiet prasmes (skills):

npx skills add globalize-now/globalize-skills

Tieši Lovable ietvaros pievienojiet lovable-i18n prasmi savā darbvietā un tad palūdziet Lovable iestatīt i18n. Izpildlaika bibliotēka paliek Lingui, tāpēc nekas nemainās tajā, kā jūsu lietotne tiek renderēta. Mainās tas, ka jums vairs nav pastāvīgi jāuzrauga lokalizācijas faili. Tas ir tas pats vienreiz-iestatīt-sinhronizēt-ar-katru-push modelis, uz kura balstās mūsu vibe-coder darbplūsma un izstrādātāju iestatīšanas process.

Cenu politika ir vienkārša individuālam veidotājam: 20 € mēnesī par darbvietu, bez maksas par lietotāju skaitu un bez maksas par valodu skaitu, plus tulkojumi, ko faktiski izmantojat. Jaunas darbvietas saņem 5 € reģistrācijas kredītu bez kartes pievienošanas, kas pietiek, lai pilnībā pārtulkotu nelielu lietotni.

---

Vai vietā izmantot izpildlaika logrīku? Lovalingo mācība

Ne tad, ja vēlaties, lai jūsu tulkojumi pastāvētu ilgāk par jebkuru konkrētu pakalpojumu sniedzēju. Izpildlaika tulkošanas logrīks sākumā ir izdevīgs, bet tas padara jūsu lietotni atkarīgu no tā, lai kāda cita servera paliktu tiešsaistē, un šai atkarībai ir reāls neveiksmes scenārijs.

Lovalingo, izpildlaika logrīks, kas ir populārs Lovable veidotāju vidū, paziņojis, ka tas tiek slēgts 2026. gada 31. augustā, un jaunas reģistrācijas vairs netiek pieņemtas, un neviens pēctecis nav nosaukts. Tā pašu migrācijas norādes iesaka lietotājiem pāriet uz projekta pašam pieejošu internacionalizāciju — tieši to pieeju ar repozitorijā iekļautiem katalogiem, kas aprakstīta šajā ceļvedī. Kad logrīka pakalpojuma sniedzējs tiek slēgts, iestrādātie tulkojumi pazūd, un saskarne atgriežas angļu valodā. Faili jūsu repozitorijā to nedara. Ja jūs jau izmantojat logrīku, mūsu Lovalingo slēgšanas migrācijas ceļvedis soli pa solim izklāsta pāreju, un plašāka problēma par tulkojumu salūšanu ar katru push paskaidro, kāpēc repozitorijā iekļauti katalogi ir izdevīgāki AI veidotajām lietotnēm.