vue-i18n国际化插件安装教程(Vue3篇)

i18n是一个国际化语言插件,意译为internationalization的缩写,代表头尾字母加上十八个字母

1,下载i18n,选择一种安装方式就行

pnpm add vue-i18n

yarn add vue-i18n

npm install vue-i18n

2,配置i18n

创造一个i18n文件夹,放在utils或随便一个地方都行,小编推荐单独src目录下的i18n文件夹,因为工作量可能很大

javascript 复制代码
// src/i18n/index.ts
import { createI18n } from "vue-i18n";
import en from './langs/en'
import zh from './langs/zh'

const messages = {
    en,
    zh
}

const i18n = createI18n({
    legacy: false, // vue3需要false 默认模式
    locale: 'zh',
    messages // 翻译语言包
})

export default i18n

legacy在vue3中需要开启false,不然会报错

lacale是本地默认语言,zh:中文 en:英文

messages是翻译语言包,防止中文和英文

我们为了方便把messages提出来放,考虑到语言工程量很大,再单独放置两种语言包在/src/i18n/langs/en.ts和/src/i18n/langs/zh.ts中

3,在main.ts中挂载使用

javascript 复制代码
/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import i18n from './i18n/index.ts'


const app = createApp(App)
app.use(router).use(i18n).mount('#app')
相关推荐
悟能不能悟3 小时前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶4 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
LFly_ice5 小时前
学习React-9-useSyncExternalStore
javascript·学习·react.js
gnip5 小时前
js上下文
前端·javascript
中草药z5 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)5 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休5 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel6 小时前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组6 小时前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架