1、创建nuxt3请看Nuxt3官网
2、下面是添加i18n的叫教程,适用于企业前端项目。
添加依赖
依赖
yarn add vue-i18n
yarn add @nuxtjs/i18n@next -D
配置文件nuxt.config.ts
//nuxt.config.ts
export default defineNuxtConfig({modules: ['@nuxtjs/i18n',],i18n: {strategy: 'no_prefix', // 添加路由前缀的方式locales: ["en","zh"], //配置语种defaultLocale: 'zh', // 默认语种vueI18n: './i18n/config.ts', // 通过vueI18n配置},})
i18n配置
import en from "assets/lang/en_us.json";
import zh from "assets/lang/zh_cn.json";
export default defineI18nConfig(() => ({legacy: false, // 是否兼容之前fallbackLocale: 'en', // 区配不到的语言就用enmessages: {en,zh}
}))
en_us.json
{"welcome": "hello","messages": "world!"
}
zh_cn.json
{"welcome": "你好","messages": "我的世界!"
}
使用
<script setup lang="ts">
import {onMounted} from "vue";const {locale, setLocale} = useI18n()
onMounted(() => {console.log("locale--language", locale.value)
})</script><template><div><v-btn @click="setLocale('en')">英文</v-btn><v-btn @click="setLocale('zh')">中文</v-btn><p>{{ $t('welcome') }}</p><p>{{ $t('messages') }}</p></div>
</template><style scoped></style>
感谢阅读,谢谢,加油。