nuxt3集成i18_nuxt3 i18

错误 “input.includes is undefined“解决方法

// nuxt.config.ts
  modules: [
    '@nuxtjs/i18n',
  ],
  i18n: {
    locales: ['en', 'zh'],
    defaultLocale: 'en',
    vueI18n: './utils/i18n.ts',
  }
1
2
3
4
5
6
7
8
9

// /until/i18n.ts
import en_us from '@/assets/lang/en_us'
import zh_cn from '@/assets/lang/zh_cn'

export default {
  fallbackLocale: 'en',
  messages: {
    en: en_us,
    zh: zh_cn,
  },
}
1
2
3
4
5
6
7
8
9
10
11

在"@nuxtjs/i18n": “^8.0.0-beta.7”,版本中i18n的配置不能全部直接引入,
也不能全部直接放置在config中,这两种方式都会导致"input.includes is undefined" 报错,解决的方式就是使用半引入的方式.
下面是两种我使用会报错的方式

// 这个
import i18n from './i18n.ts'
export default defineNuxtConfig({
 i18n: i18n
})
// 以及
        i18n: {
         strategy: 'prefix_except_default', 
         defaultLocale: 'en',
         locales:[],
            vueI18n:
            {
                legacy: false,
                locale: 'en',
                messages: {
                    en: { Hellow: 'Hellow' }, ch: { Hellow: '你好' }
                }

            }

        }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

使用方式

修改成功后在项目的地址后会自动配置当前语言的地址，默认语言没有地址，使用localePath跳转路由，使用switchLocalePath切换语言，两个函数都只是提供地址，如果需要跳转而且刷新页面建议使用localtion.replace()刷新页面,但是如果使用llayout,可能会导致请求发送时携带请求头的语言配置和当前语言不一样,可以先使用navigateTo跳转语言,不会刷新页面然后使用localtion.replace()刷新页面。跳转到新页面并切换语言同理

配置自动翻译

这个方式依赖nuxt的自动配置路由，如果在使用手动配置路由的话就需要配置所有语言的页面。
不建议使用手动配置路由，如果需要使用web和h5分开路由的话可以使用在nuxtconfig中配置路由筛选的方式。
语言的翻译可以使用i18n的配置插件在vscode中搜索i18n-ally就可以直接翻译，可以配置翻译引擎，谷歌或者百度等

i18n-ally 配置

{
  "i18n-ally.localesPaths": ["src/assets/language"],
  "i18n-ally.keystyle": "nested",
  "i18n-ally.sortKeys": true,
  "i18n-ally.namespace": true,
  "i18n-ally.sourceLanguage": "zh",
  "i18n-ally.displayLanguage": "zh_cn",
  "i18n-ally.enabledFrameworks": ["vue"],
  "i18n-ally.extract.autoDetect": false
}
1
2
3
4
5
6
7
8
9
10