\n\n\n```\n\n> Prop `locale` được truyền từ trang Astro (phát hiện phía máy chủ) và được sử dụng để khởi tạo `installIntlayer`, thiết lập ngôn ngữ ban đầu cho tất cả các composable bên trong cây thành phần.\n\n### Bước 7: Thêm bộ chuyển đổi ngôn ngữ\n\nChức năng chuyển đổi ngôn ngữ được tích hợp trực tiếp vào template của Vue island (xem Bước 6 ở trên). Nó sử dụng composable `useLocale` từ `vue-intlayer` và điều hướng đến URL bản địa hóa khi người dùng chọn ngôn ngữ mới:\n\n```vue fileName=\"src/components/vue/VueIsland.vue\"\n\n\n\n```\n\n> **Lưu ý về tính bền vững:**\n> Việc sử dụng `onLocaleChange` để chuyển hướng qua `window.location.href` đảm bảo rằng một URL ngôn ngữ mới có tiền tố sẽ được truy cập. Điều này cho phép middleware Intlayer thiết lập cookie ngôn ngữ và ghi nhớ lựa chọn của người dùng cho các lần truy cập sau.\n\n### Bước 7: Sitemap và Robots.txt\n\nIntlayer cung cấp các tiện ích để tự động tạo sơ đồ trang web (sitemap) bản địa hóa và file robots.txt của bạn.\n\n#### Sitemap\n\nIntlayer comes with a built-in sitemap generator to help you create a sitemap for your application easily. It handles localized routes and adds the necessary metadata for search engines.\n\n> The Intlayer generated sitemap supports the `xhtml:link` namespace (Hreflang XML Extensions). Unlike the default sitemap generators that only list raw URLs, Intlayer automatically creates the required bidirectional links between all language versions of a page (e.g., `/about`, `/about?lang=fr`, and `/about?lang=es`). This ensures search engines correctly index and serve the right language version to the right audience.\n\nTạo `src/pages/sitemap.xml.ts` để tạo sơ đồ trang web bao gồm tất cả các route bản địa hóa của bạn.\n\n```typescript fileName=\"src/pages/sitemap.xml.ts\"\nimport type { APIRoute } from \"astro\";\nimport { generateSitemap, type SitemapUrlEntry } from \"intlayer\";\n\nconst pathList: SitemapUrlEntry[] = [\n { path: \"/\", changefreq: \"daily\", priority: 1.0 },\n { path: \"/about\", changefreq: \"monthly\", priority: 0.7 },\n];\n\nconst SITE_URL = import.meta.env.SITE ?? \"http://localhost:4321\";\n\nexport const GET: APIRoute = async ({ site }) => {\n const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });\n\n return new Response(xmlOutput, {\n headers: { \"Content-Type\": \"application/xml\" },\n });\n};\n```\n\n#### Robots.txt\n\nTạo `src/pages/robots.txt.ts` để kiểm soát hoạt động thu thập thông tin của các công cụ tìm kiếm.\n\n```typescript fileName=\"src/pages/robots.txt.ts\"\nimport type { APIRoute } from \"astro\";\nimport { getMultilingualUrls } from \"intlayer\";\n\nconst getAllMultilingualUrls = (urls: string[]) =>\n urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);\n\nconst disallowedPaths = getAllMultilingualUrls([\"/admin\", \"/private\"]);\n\nexport const GET: APIRoute = ({ site }) => {\n const robotsTxt = [\n \"User-agent: *\",\n \"Allow: /\",\n ...disallowedPaths.map((path) => `Disallow: ${path}`),\n \"\",\n `Sitemap: ${new URL(\"/sitemap.xml\", site).href}`,\n ].join(\"\\n\");\n\n return new Response(robotsTxt, {\n headers: { \"Content-Type\": \"text/plain\" },\n });\n};\n```\n\n### Cấu hình TypeScript\n\nIntlayer sử dụng cơ chế mở rộng module (module augmentation) để tận dụng TypeScript, làm cho cơ sở mã của bạn mạnh mẽ hơn.\n\n\n\n\n\nĐảm bảo cấu hình TypeScript của bạn bao gồm các kiểu dữ liệu được tạo tự động.\n\n```json5 fileName=\"tsconfig.json\"\n{\n // ... cấu hình TypeScript hiện tại của bạn\n \"include\": [\n // ... cấu hình TypeScript hiện tại của bạn\n \".intlayer/**/*.ts\", // Bao gồm các kiểu dữ liệu được tạo tự động\n ],\n}\n```\n\n### Cấu hình Git\n\nKhuyên bạn nên bỏ qua các file được tạo bởi Intlayer. Điều này ngăn chúng được commit vào kho lưu trữ Git của bạn.\n\nĐể làm điều đó, hãy thêm các hướng dẫn sau vào file `.gitignore` của bạn:\n\n```bash\n# Bỏ qua các file được tạo bởi Intlayer\n.intlayer\n```\n\n### Tiện ích mở rộng VS Code\n\nĐể cải thiện trải nghiệm phát triển của bạn với Intlayer, bạn có thể cài đặt **tiện ích mở rộng Intlayer chính thức cho VS Code**.\n\n[Cài đặt từ VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)\n\nTiện ích này sẽ cung cấp:\n\n- **Tự động hoàn thành** cho các khóa dịch.\n- **Phát hiện lỗi thời gian thực** cho các bản dịch còn thiếu.\n- **Xem trước trực tiếp** nội dung đã dịch.\n- **Các hành động nhanh** để tạo và cập nhật bản dịch dễ dàng.\n\nĐể biết thêm thông tin về cách sử dụng tiện ích này, hãy xem [tài liệu tiện ích VS Code](https://intlayer.org/doc/vs-code-extension).\n\n---\n\n### (Tùy chọn) Bước 1 : Trích xuất nội dung các thành phần của bạn\n\nNếu bạn có một cơ sở mã hiện có, việc chuyển đổi hàng nghìn tệp có thể tốn nhiều thời gian.\n\nĐể đơn giản hóa quy trình này, Intlayer đề xuất một [trình biên dịch](/vi/doc/compiler) / [trình trích xuất](/vi/doc/concept/cli/extract) để chuyển đổi các thành phần của bạn và trích xuất nội dung.\n\nĐể thiết lập, bạn có thể thêm phần `compiler` vào tệp `intlayer.config.ts` của mình:\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... Phần còn lại của cấu hình\n compiler: {\n /**\n * Cho biết trình biên dịch có nên được bật hay không.\n */\n enabled: true,\n\n /**\n * Xác định đường dẫn các tệp đầu ra\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * Cho biết các thành phần có nên được lưu sau khi chuyển đổi hay không. Bằng cách đó, trình biên dịch có thể được chạy chỉ một lần để chuyển đổi ứng dụng, sau đó có thể được gỡ bỏ.\n */\n saveComponents: false,\n\n /**\n * Tiền tố khóa từ điển\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nChạy trình trích xuất để chuyển đổi các thành phần và trích xuất nội dung\n\n```bash packageManager=\"npm\"\nnpx intlayer extract\n```\n\n```bash packageManager=\"pnpm\"\npnpm intlayer extract\n```\n\n```bash packageManager=\"yarn\"\nyarn intlayer extract\n```\n\n```bash packageManager=\"bun\"\nbun x intlayer extract\n```\n\n \n \n\nCập nhật `vite.config.ts` của bạn để bao gồm plugin `intlayerCompiler`:\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerCompiler } from \"vite-intlayer\";\n\nexport default defineConfig({\n plugins: [\n intlayer(),\n intlayerCompiler(), // Thêm plugin trình biên dịch\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # Hoặc npm run dev\n```\n\n```bash packageManager=\"pnpm\"\npnpm run build # Or pnpm run dev\n```\n\n```bash packageManager=\"yarn\"\nyarn build # Or yarn dev\n```\n\n```bash packageManager=\"bun\"\nbun run build # Or bun run dev\n```\n\n \n\n\n---\n\n### Tìm hiểu sâu hơn\n\nNếu bạn muốn tìm hiểu thêm, bạn cũng có thể triển khai [Visual Editor](/vi/doc/concept/editor) hoặc sử dụng [CMS](/vi/doc/concept/cms) để quản lý nội dung bên ngoài.\n","about":"Tìm hiểu cách thêm đa ngôn ngữ (i18n) vào trang web Astro + Vue của bạn bằng Intlayer. Làm theo hướng dẫn này để trang web của bạn có thể sử dụng nhiều ngôn ngữ.","url":"https://intlayer.org/vi/doc/environment/astro/vue","datePublished":"24-04-2026","dateModified":"06-05-2026","keywords":"đa ngôn ngữ, tài liệu, Intlayer, Astro, Vue, i18n, JavaScript","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Nhà phát triển (Developers), Quản trị nội dung (Content Managers)"}}

Ngày tạo:2026-04-24Cập nhật lần cuối:2026-05-06