wordpress 自动发卡,青岛网络优化代理,时尚美容网站建设,做名片用什么网站目录 引入
如何做到
下载i18n库
构建整体翻译文件结构
语言包文件
i18n配置文件
把i18n挂载到vue实例上
添加按钮点击事件切换语言 引入 我们现在有这样一个要求,我们想要对我们开发的网页进行国际化操作,也就是我们不仅要有中文,还要有英文等。用户可以随时进行不同语言…目录 引入
如何做到
下载i18n库
构建整体翻译文件结构
语言包文件
i18n配置文件
把i18n挂载到vue实例上
添加按钮点击事件切换语言 引入 我们现在有这样一个要求,我们想要对我们开发的网页进行国际化操作,也就是我们不仅要有中文,还要有英文等。用户可以随时进行不同语言的切换,页面中页呈现出不同的语言文字。 如何做到
下载i18n库 我们通过i18n这个库来进行操作 我们首先要在我们本地下载这个库 npm install vue-i18n 构建整体翻译文件结构
我们在我们vue工程目录下的src中新建i18n文件夹,里面的结果如图所示 语言包文件
我们在langs的en.js和zh.js中分别写上如下代码 这两个其实就是我们的语言包,自己定义的,也可以添加更多的,只需要加入js文件,然后写入对应语言即可 en.js(英文翻译)
export default {messages: {//英文的苹果叫appleapple:apple}
}
zh.js(中文翻译)
export default {messages: {//中文的苹果叫苹果apple:苹果}
} i18n配置文件
i18n目录下的index.js文件(主要的配置文件)
import { createI18n } from vue-i18n
// 英文翻译包
import en from ./langs/en
// 中文翻译包
import zh from ./langs/zh// 把语言包放进去
const messages {zh,en
}
const i18n createI18n({// vue2 legacy写false和true就行, vue3 写falselegacy:false,// locale是表示我们当前的语言,你是中文他就会用zh.js,你是英文他就会用en.js//本地存储中有就用本地存储中的,没有就默认为enlocale:localStorage.getItem(lang) || en,messages
})export default i18n 把i18n挂载到vue实例上 这里是用的vue3的语法,vue2也一样的,挂载上去就行 import { createApp } from vue
import App from ./App.vue
//这里
import i18n from ./i18n;const app createApp(App)
//这里
app.use(i18n)app.mount(#app)
添加按钮点击事件切换语言
按钮
button clickchangeLang1(en)切换到英文/buttonbutton clickchangeLang1(zh)切换到中文/button
在vue的script中导入useI18n
import { useI18n } from vue-i18n;
点击事件代码 这里是vue3的语法setup,vue2也同理 setup() {// 语言类型对象读取const {locale} useI18n();const changeLang1 (type) {showToast(1s后切换英文语言);setTimeout(() {locale.value type;localStorage.setItem(lang,type)location.reload();},1000)// console.log(locale.value);};const changeLang2 (type) {showToast(Switch chinese language after 1s);setTimeout(() {locale.value type;localStorage.setItem(lang,type)location.reload();},1000)// console.log(locale.value);};return {changeLang1,changeLang2}
} 解释这里的 const {locale} useI18n() 是什么 我们回到我们的i18n目录下的index文件 我们可以看到,他就是我们的语言包类型! import { createI18n } from vue-i18n
// 英文翻译包
import en from ./langs/en
// 中文翻译包
import zh from ./langs/zhconst messages {zh,en
}
const i18n createI18n({legacy:false,//这个东西locale:localStorage.getItem(lang) || en,messages
})export default i18n 因此这句代码就是在修改我们的语言包类型 locale.value type 最后一步,显示在网页上
在标签之间的话就是
div{{ $t(messages.apple) }}/div
如果是在标签上的话,v-bing,v-model等
Button :label$t(messages.apple)/ 这里的messages就是我们语言包里的东西,apple就是语言包里的标识 注意语言包里的翻译标识在不同语言中的应该是一样的 比如我这里想要翻译的是apple那么英文包里面的标识是apple,中文包下的也是apple,只是他们的值一个是英文,一个是中文而已 export default {//messages在这messages: {//中文的苹果叫苹果//apple在这apple:苹果}
} 当然也可以改成其他的,在里面添加多个,例如 zh.js export default {big: {a:哈哈,apple:苹果}
} en.js export default {big: {a:haha,apple:apple}
} 我们这里调用的时候就应该是 div{{ $t(big.a) }}/div
div{{ $t(big.apple) }}/div 当我们点击中文按钮时,按照 $t这种写法的会自动翻译成中文显示在页面上
点击英文时自动翻译成英文显示在页面上
