Geriausias būdas lokalizuoti Lovable programėlę, sukurtą klasikiniame Vite steke, — išskirti kode įrašytas eilutes į į saugyklą įtrauktus Lingui PO katalogus, o ne prijungti vykdymo metu veikiantį vertimo valdiklį. Jūsų Lovable programėlė yra kliento pusėje atvaizduojama React SPA, todėl nėra serverio atvaizdavimo, prie kurio būtų galima prisijungti. Patikimas sprendimas — vertimo failai, esantys jūsų saugykloje ir įtraukiami į jūsų versiją. globalize.now yra dirbtiniu intelektu paremta lokalizacijos infrastruktūra, kuri atlieka išskyrimą ir sinchronizuoja katalogus po kiekvieno Git įkėlimo, todėl sąranką atliekate vieną kartą ir daugiau niekada nebetvarkote lokalės failų rankiniu būdu.

Kokiame steke veikia jūsų Lovable programėlė — klasikiniame Vite ar TanStack Start?

Pirmiausia atidarykite failų medį, nes Lovable naudoja du skirtingus stekus, kuriems reikia skirtingos i18n sąrankos. Jei matote src/pages/Index.tsx, src/main.tsx ir vite.config.ts, naudojate klasikinį Vite ir React SPA steką — tai numatytasis Lovable variantas. TanStack Start projektuose vietoj jų rasite src/routes/, src/router.tsx, src/routeTree.gen.ts ir src/server.ts.

Stekas pasirenkamas kuriant projektą ir vėliau jo pakeisti negalima, todėl šis sprendimas jau priimtas už jus. Klasikinis Vite stekas viską atvaizduoja naršyklėje ir pagal numatytuosius nustatymus neatlieka duomenų gavimo serverio pusėje. Šis vadovas skirtas klasikinei Vite SPA. Jei jūsų failai atitinka TanStack Start struktūrą, vadovaukitės mūsų TanStack Start i18n vadovu Lovable, nes serverio atvaizdavimas keičia vertimų įkėlimo principą.

Kodėl Vite SPA Lovable programėlės lieka už i18n įrankių ribų?

Nes įrankių dėmesys nukrypo į naujesnį Lovable numatytąjį TanStack Start su SSR, o klasikinis Vite SPA liko nepakankamai aptarnautas, nors tebėra dažniausiai naudojamas Lovable stekas. Pastaraisiais mėnesiais visi į Lovable orientuoti lokalizacijos įrankiai, įskaitant Lovalingo, Intlayer ir Paraglide, savo vadovus perorientavo į TanStack Start su atvaizdavimu serverio pusėje.

Taip atsiranda spraga. Kliento pusėje atvaizduojamas SPA turi realių apribojimų, kurių SSR vadovai neaptaria: nėra serverio atvaizdavimo, kuris galėtų įterpti išverstą žymėjimą, visas paketas įkeliamas naršyklėje, o vėliau įkeliamas scenarijus gali perpiešti anglišką sąsają. Gera žinia ta, kad klasikiniam stekui yra aiškus ir gerai palaikomas sprendimas, apie kurį dauguma kūrėjų niekada neišgirsta, nes garsiausi įrankiai vaikosi kito steko.

Kuo skiriasi į saugyklą įtraukti katalogai ir vykdymo metu veikiantis vertimo valdiklis?

Į saugyklą įtraukti katalogai yra vertimo failai, įrašyti į jūsų saugyklą ir įtraukiami kūrimo metu, o vykdymo metu veikiantis valdiklis — trečiosios šalies scenarijus, kuris pakeičia tekstą naršyklėje po to, kai jūsų angliška sąsaja jau įkelta. Šis skirtumas lemia tris Vite SPA svarbius dalykus.

Pirma — mirgėjimas ir išdėstymo poslinkis: valdiklis pirmiausia parodo anglų kalbą, tada ją perrašo, todėl naudotojai mato akivaizdų pakeitimą, o išdėstymas gali šokinėti. Į saugyklą įtraukti katalogai pirmojo atvaizdavimo metu pateikia tinkamą kalbą. Antra — indeksavimas: jūsų versijoje esantys tekstai yra šaltinio dalis, o valdiklio tekstas įterpiamas vėliau ir paieškos sistemoms jį sunkiau perskaityti. Trečia — kontrolė: į saugyklą įtraukti katalogai yra jūsų failai jūsų saugykloje, todėl programėlei nereikia, kad išorinė paslauga liktų prisijungusi, kad ji galėtų kalbėti vokiškai ar japoniškai.

Kaip pridėti i18n prie Lovable Vite programėlės naudojant Lingui?

Naudokite Lingui kaip i18n sluoksnį, apgaubkite juo eilutes ir leiskite jo Vite papildiniui kompiliuoti katalogus. Lingui yra lengva i18n sistema su specialiu Vite papildiniu ir PO pagrįstu katalogų formatu — būtent to reikia kliento pusėje atvaizduojamam SPA.

Pirmiausia įdiekite paketus. Lingui CLI, Vite papildinį ir React vykdymo aplinką pateikia atskirai:

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

Tada užregistruokite papildinį faile vite.config.ts ir pridėkite lingui.config.ts, nurodantį jūsų šaltinio ir lokalių aplankus:

// 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"],
    },
  ],
});

Tada apgaubkite kode įrašytą JSX tekstą Trans makrokomanda, užuot palikę paprastas eilutes:

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

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

Dabar atlikite išskyrimą. CLI nuskenuoja jūsų src aplanką ir kiekvienai lokalei įrašo PO katalogą, pavyzdžiui, src/locales/en/messages.po:

npx lingui extract

Užpildykite msgstr laukus kiekvienai kalbai arba patikėkite šį veiksmą automatiniam sluoksniui (žr. kitą skyrių). Atskiros kompiliavimo komandos vykdyti nereikia, nes @lingui/vite-plugin kūrimo ir versijos surinkimo metu PO katalogus kompiliuoja automatiškai.

Galiausiai pridėkite kalbos perjungiklį, vykdymo metu aktyvindami lokalę:

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

Tai visas klasikinio Vite steko ciklas: įdiegti, apgaubti, išskirti, išversti, perjungti. Viskas, išskyrus pačius vertimus, yra jūsų saugykloje.

Kaip globalize.now automatizuoja šį procesą po kiekvieno įkėlimo?

globalize.now pašalina rankinius išskyrimo ir užpildymo veiksmus — stebi jūsų saugyklą ir atlieka juos už jus po kiekvieno Git įkėlimo. Jis randa naujas kode įrašytas eilutes jūsų Lovable kodų bazėje, sugeneruoja Lingui reikalingus raktus ir PO įrašus, sukuria vertimus ir įrašo atnaujintus katalogus atgal, todėl jūsų src/locales aplankas visada aktualus ir nereikia vykdyti komandų.

Vieną kartą prijunkite saugyklą prie globalize.now ir jis pradės ją stebėti. Jei norite sąranką atlikti tiesiai redaktoriuje, įdiekite įgūdžius:

npx skills add globalize-now/globalize-skills

Konkrečiai Lovable aplinkoje pridėkite lovable-i18n įgūdį savo darbo srityje, tada paprašykite Lovable nustatyti i18n. Vykdymo aplinka ir toliau bus Lingui, todėl programėlės atvaizdavimas nesikeis. Pasikeis tik tai, kad nebereikės nuolat prižiūrėti lokalės failų. Tuo pačiu principu — sąranka vieną kartą, sinchronizavimas po kiekvieno įkėlimo — paremti mūsų vibe koduotojų darbo eiga ir kūrėjo sąranka.

Kainodara paprasta solo kūrėjui: 20 € per mėnesį vienai darbo sričiai, be mokesčių už naudotojų vietas ar kalbas, mokant tik už faktiškai naudojamus vertimus. Naujos darbo sritys gauna 5 € registracijos kreditą, kortelės nereikia — to pakanka nedidelei programėlei išversti nuo pradžios iki galo.

Ar verta naudoti vykdymo metu veikiantį valdiklį? Lovalingo pamoka

Ne, jei norite, kad vertimai išliktų nepriklausomi nuo vieno tiekėjo. Iš pradžių vykdymo metu veikiantis vertimo valdiklis patogus, tačiau dėl jo jūsų programėlė priklauso nuo to, ar kito tiekėjo serveris liks pasiekiamas, o ši priklausomybė turi realų gedimo scenarijų.

Lovalingo — tarp Lovable kūrėjų populiarus vykdymo metu veikiantis valdiklis — paskelbė, kad 2026 m. rugpjūčio 31 d. nutrauks veiklą; nauji naudotojai nebepriimami, o įpėdinis nepaskelbtas. Jų migravimo rekomendacijos ragina naudotojus pereiti prie projektui priklausančios internacionalizacijos — būtent prie šiame vadove aprašomo į saugyklą įtrauktų katalogų modelio. Kai valdiklio tiekėjas užsidaro, įterpiami vertimai nustoja veikti, o sąsaja grįžta į anglų kalbą. Failai jūsų saugykloje — ne. Jei jau naudojate valdiklį, mūsų Lovalingo uždarymo migravimo vadove aprašytas perėjimas, o platesnė vertimų lūžimo po kiekvieno įkėlimo problema paaiškina, kodėl AI sukurtoms programėlėms geriau rinktis į saugyklą įtrauktus katalogus.

globalize.now paverčia užkoduotą programos tekstą į vertimui paruoštus lokalės failus ir juos atnaujina, kai jūs diegiate naujus pakeitimus.

Išbandyti globalize.now nemokamai