## 创建Nuxt项目 ```shell npm init nuxt-app <project-name> ``` <br/> ## i18n ### 引入i18n库 ```shell npm install @nuxtjs/i18n ``` <br/> ### 添加i18n配置 nuxt.config.js ```javascript export default { ... modules: [ ... '@nuxtjs/i18n' ], i18n: { // 提供支持的语言 locales: ['en', 'zh', 'tw'], // 直接从 / 访问时使用的默认语言 defaultLocale: 'en', vueI18n: { // 当访问某个语言时找不到对应的配置，使用一个指定的语言进行替代 fallbackLocale: 'en', messages: { en: { welcome: 'Welcome to your Nuxt Application', fb: 'fallback' }, zh: { welcome: '欢迎来到你的Nuxt应用程序', fb: '回落' }, tw: { welcome: '歡迎來到你的Nuxt應用程式' } } }, // 使用cookie缓存切换的语言 detectBrowserLanguage: { useCookie: true, cookieKey: 'custom_cookie' } } } ``` <br/> ### 在页面中使用 components/Tutorial.vue ```html <template> <div class="relative flex items-top justify-center min-h-screen bg-gray-100 sm:items-center sm:pt-0"> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.1.2/dist/tailwind.min.css" rel="stylesheet"> <div class="max-w-4xl mx-auto sm:px-6 lg:px-8"> ... <div class="mt-8 bg-white overflow-hidden shadow sm:rounded-lg p-6"> <h2 class="text-2xl leading-7 font-semibold"> {{ $t("welcome") }} </h2> ... <div class="text-center mt-4"> <nuxt-link :to="localePath('index', 'en')">English</nuxt-link> <nuxt-link :to="localePath('index', 'zh')">简体中文</nuxt-link> <nuxt-link :to="localePath('index', 'tw')">繁體中文</nuxt-link> <p>{{ $t("fb") }}</p> </div> </div> ... </div> </div> </template> ``` `$t`、`localePath`、`switchLocalePath`等方法由`@nuxtjs/i18n`挂在到Vue对象/原型上，可以直接使用。 <br/> ## 参考 [nuxt-i18n-module](https://i18n.nuxtjs.org/setup)