国际化
NuxtPro采用了和Nuxt官方深度兼容的 @nuxtjs/i18n来作为国际化功能的支持。只需简单配置即可轻松上手。
国际化配置
我们需要在项目的nuxt.config.ts 文件中配置关于i18n的部分，这里是主要控制程序默认加载语言以及总体语言涵盖的地方。
ts
//引入国际化i18n模块
modules:[
'@nuxtjs/i18n',
],
i18n: {
strategy: 'prefix_except_default', //语言加载策略
locales: ['en-US', 'zh-CN','JP'], //语言分类
defaultLocale: 'en-US', //程序默认加载语言
vueI18n: '@@/i18n/config.ts', //默认国际化配置加载项
}i18n相关配置
所有的i18n相关的配置都在根目录下的 i18n文件夹中。
其中 index.ts 用于主要控制多语言映射；
ts
// 框架 国际化文件
import zh_cn from './lang/zh_cn';
import en_us from './lang/en_us';
import ja from './lang/ja';
// 加载 lang 文件夹下的国际化
export const loadLang = (modules: Record<string, any>) => {
let messages: { [key: string]: string } = {};
Object.keys(modules).forEach(module => {
Object.assign(messages, { ...modules[module].default });
})
return messages;
}
export const messages: { [key: string]: any } = {
'zh-CN': {
langName: '简体中文',
...loadLang(zh_cn),
},
'en-US': {
langName: 'English',
...loadLang(en_us),
},
'JP': {
langName: '日本語',
...loadLang(ja),
}
}config.ts 用于控制加载项；
ts
import zh_cn from './lang/zh_cn';
import en_us from './lang/en_us';
import ja from './lang/ja';
export default defineI18nConfig(() => ({
legacy: false,
missingWarn: false,
fallbackWarn: false,
fallbackLocale: 'en-US',
messages: {
'zh-CN': zh_cn,
'en-US': en_us,
'JP': ja
}
}))lang文件夹里包含了你所需要的各种语言；
中文
home: {
title: 'NuxtPro',
description: '基于Nuxt3的企业级SaaS出海模板，预集成Stripe/Cream支付、谷歌登录、多语言路由和SEO工具。快速构建SSR的全球化Web应用，开箱即用',
startLink: '立即开始免费体验~',
thirdPartyLink: '前往Github~',
loginButton: '登录',
discountGet: '🔥推特(X)关注立即获取40刀折扣券🔥',
features: {
title: '集成当下最流行的开源技术栈方案，让您的创业历程仅需片刻',
sutTitle_1: 'NuxtJs3',
subDescription_1: '开源的全栈的适用于生产环境的 NuxtJs 框架。',
sutTitle_2: 'Vue 3',
subDescription_2: '用于 Web 和原生用户界面的开源代码库。',
sutTitle_3: 'BetterAuth',
subDescription_3: '开源的认证授权框架。',
sutTitle_4: 'Shadcn UI',
subDescription_4: '用于构建现代风格界面的开源UI组件。',
sutTitle_5: 'Tailwindcss',
subDescription_5: '用于快速 UI 开发的开源 CSS 框架。',
sutTitle_6: 'DrizzleOrm',
subDescription_6: '用于 Node.js 和 TypeScript 的开源下一代数据库工具包',
sutTitle_7: 'Stripe',
subDescription_7: '最好、最安全的在线支付服务。',
sutTitle_8: 'Creem',
subDescription_8: '为 SaaS 和独立开发者提供稳定的的在线支付服务，且不会让他们破产。',
sutTitle_9: 'Resend',
subDescription_9: '为开发者们打造的现代邮件API服务。',
sutTitle_10: 'i18n',
subDescription_10: '开源且轻松地为Nuxt项目添加国际化支持。',
sutTitle_11: 'plausible',
subDescription_11: '开源且隐私友好的Google Analytics 替代品。',
sutTitle_12: 'vite-pwa',
subDescription_12: '基于vite的开源且零配置的PWA框架。',
},
...........英文
home: {
title: 'NuxtPro',
description: 'Open-source Nuxt3 SaaS template, pre-integrated with global payment gateways (Stripe/Cream), Google OAuth, i18n routing, and SEO optimization tools. Designed for developers launching multilingual web apps, it offers SSR/SSG support and production-grade security out of the box.',
startLink: 'Start Free Trial~',
thirdPartyLink: 'Github →',
loginButton: 'Login',
discountGet: '🔥Follow X immediately to get a $40 discount coupon🔥',
features: {
title: 'Integrate the most popular open source technology stack to make your entrepreneurial journey just a moment',
sutTitle_1: 'NuxtJs3',
subDescription_1: 'Open source full stack Nuxtjs framework for production.',
sutTitle_2: 'Vue 3',
subDescription_2: 'Open source library for web and native user interfaces.',
sutTitle_3: 'BetterAuth',
subDescription_3: 'Open source authentication and authorization framework.',
sutTitle_4: 'Shadcn UI',
subDescription_4: 'Open source UI components for building modern websites.',
sutTitle_5: 'Tailwindcss',
subDescription_5: 'Open source CSS framework for rapid UI development.',
sutTitle_6: 'DrizzleOrm',
subDescription_6: 'Open source next-gen database toolkit for Node.js & TypeScript',
sutTitle_7: 'Stripe',
subDescription_7: 'Best and most secure online payment service.',
sutTitle_8: 'Creem',
subDescription_8: 'Smooth payments for SaaS and Indie Hackers that don`t break the bank.',
sutTitle_9: 'Resend',
subDescription_9: 'Modern email service and API for developers.',
sutTitle_10: 'i18n',
subDescription_10: 'Open source and easily add internationalization for Nuxt project.',
sutTitle_11: 'plausible',
subDescription_11: 'Open source privacy-friendly Google Analytics alternative.',
sutTitle_12: 'vite-pwa',
subDescription_12: 'Open source Zero-config PWA Framework-agnostic Plugin for Vite.',
},
...........日文
home: {
title: 'NuxtPro',
description: 'オープンソースのNuxt3向けSaaSテンプレートで、Stripe/Creamをはじめとするグローバル決済ゲートウェイ、Google OAuth、多言語ルーティング（i18n）、SEO最適化ツールを事前に統合。多言語Webアプリを立ち上げる開発者向けに設計されており、SSR/SSGのサポートと本番環境レベルのセキュリティを標準で提供します。',
startLink: '無料トライアルを開始',
thirdPartyLink: 'Github →',
loginButton: 'ログイン',
discountGet: '🔥Xをフォローしてすぐに40ドルの割引クーポンをゲット🔥',
features: {
title: '最も人気のあるオープンソーステクノロジースタックを統合して、起業家としての旅を一瞬で実現しましょう',
sutTitle_1: 'NuxtJs3',
// Start of Selection
subDescription_1: '本番環境向けのオープンソースのフルスタックNuxt.jsフレームワーク。',
sutTitle_2: 'Vue 3',
subDescription_2: 'ウェブおよびネイティブユーザーインターフェースのためのオープンソースライブラリ。',
sutTitle_3: 'BetterAuth',
subDescription_3: 'オープンソースの認証および承認フレームワーク。',
sutTitle_4: 'Shadcn UI',
subDescription_4: '現代のウェブサイトを構築するためのオープンソースのUIコンポーネント。',
sutTitle_5: 'Tailwindcss',
subDescription_5: '迅速なUI開発のためのオープンソースのCSSフレームワーク。',
sutTitle_6: 'DrizzleOrm',
subDescription_6: 'Node.js & TypeScriptのためのオープンソースの次世代データベースツールキット。',
sutTitle_7: 'Stripe',
subDescription_7: '最も安全なオンライン支払いサービス。',
sutTitle_8: 'Creem',
subDescription_8: 'SaaSとインディーハッカーのためのスムーズな支払い。',
sutTitle_9: 'Resend',
subDescription_9: '開発者のための現代のメールサービスとAPI。',
sutTitle_10: 'i18n',
subDescription_10: 'オープンソースでNuxtプロジェクトに国際化を容易に追加できます。',
sutTitle_11: 'plausible',
subDescription_11: 'オープンソースのプライバシーに配慮したGoogle Analyticsの代替品。',
sutTitle_12: 'vite-pwa',
subDescription_12: 'Viteのオープンソースのゼロ設定のPWAフレームワーク。',
},
...........项目中使用方法
无需多余的配置引用，NuxtPro已经贴心地帮您自动集成在了项目中，直接在您所需加载国际化语言的位置，html中使用
html
{{ $t('您想国际化翻译的内容') }}即可实现国际化的翻译。\n
html
<div class="prose prose-lg max-w-none text-gray-300 prose-headings:text-white prose-strong:text-white prose-a:text-yellow-400 hover:prose-a:text-yellow-300">
<h2 class="mt-8 border-b pb-2 border-gray-700 text-yellow-400">{{ $t('terms.introduction.heading') }}</h2>
<p>{{ $t('terms.introduction.p1') }}</p>
<h2 class="mt-12 border-b pb-2 border-gray-700 text-yellow-400">{{ $t('terms.useOfServices.heading') }}</h2>
<p>{{ $t('terms.useOfServices.p1') }}</p>
<h2 class="mt-12 border-b pb-2 border-gray-700 text-yellow-400">{{ $t('terms.userAccounts.heading') }}</h2>
<p>{{ $t('terms.userAccounts.p1') }}</p>
<h2 class="mt-12 border-b pb-2 border-gray-700 text-yellow-400">{{ $t('terms.intellectualProperty.heading') }}</h2>
<p>{{ $t('terms.intellectualProperty.p1') }}</p>
<h2 class="mt-12 border-b pb-2 border-gray-700 text-yellow-400">{{ $t('terms.userContent.heading') }}</h2>
<p>{{ $t('terms.userContent.p1') }}</p>
<h2 class="mt-12 border-b pb-2 border-gray-700 text-yellow-400">{{ $t('terms.prohibitedActivities.heading') }}</h2>
<p>{{ $t('terms.prohibitedActivities.intro') }}</p>
<ul class="list-disc pl-6">
<li>{{ $t('terms.prohibitedActivities.item1') }}</li>
<li>{{ $t('terms.prohibitedActivities.item2') }}</li>
<li>{{ $t('terms.prohibitedActivities.item3') }}</li>
<li>{{ $t('terms.prohibitedActivities.item4') }}</li>
</ul>
</div>如果您想在 ts脚本中配置国际化，则可以采取
ts
t('您想要国际化翻译的部分')ts
// 获取支付状态对应的文本
const getStatusText = (payType: string) => {
const statusMap: Record<string, string> = {
'0': t('affiliate.referral_record_status_created'),
'1': t('affiliate.referral_record_status_pending'),
'2': t('affiliate.referral_record_status_completed'),
'3': t('affiliate.referral_record_status_canceled')
};
return statusMap[payType] || '未知状态';
};