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')
相关推荐
Nan_Shu_6146 分钟前
学习:uniapp全栈微信小程序vue3后台(28)
前端·学习·微信小程序·小程序·uni-app
珍宝商店17 分钟前
原生 JavaScript 方法实战指南
开发语言·前端·javascript
计算机学姐25 分钟前
基于微信小程序的扶贫助农系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
蓝莓味的口香糖27 分钟前
【企业微信】VUE项目在企微中自定义转发内容
前端·vue.js·企业微信
IT_陈寒27 分钟前
告别低效!用这5个Python技巧让你的数据处理速度提升300% 🚀
前端·人工智能·后端
—Qeyser29 分钟前
Laravel + UniApp AES加密/解密
前端·uni-app·laravel
C++chaofan32 分钟前
游标查询在对话历史场景下的独特优势
java·前端·javascript·数据库·spring boot
cg.family33 分钟前
Vue3 v-slot 详解与示例
前端·javascript·vue.js
FreeBuf_1 小时前
新型域名前置攻击利用Google Meet、YouTube、Chrome及GCP构建流量隧道
前端·chrome
c0detrend1 小时前
技术架构设计:如何打造一个高性能的Chrome截图插件
前端·chrome