每天记录一个知识点(vue中使用i18n)
程序员文章站
2022-05-15 23:44:21
...
不废话直接上代码(打卡:2021-01-06 )
一、安装依赖
npm i vue-i18n -S
二、在src目录下创建i18n文件夹;
三、index.js 代码
import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
// 引入各个语言配置文件
import zh from './config/zh';
import en from './config/en';
// 创建vue-i18n实例i18n
const i18n = new VueI18n({
// 设置默认语言
locale: 'zh', // 语言标识
// 添加多语言(每一个语言标示对应一个语言文件)
messages: {
zh,
en,
}
})
// 暴露i18n
export default i18n;
四、zh.js 代码
const zh = {
admin: '后台管理系统',
test: '你好',
language: {
zh: '中文',
en: 'English',
},
}
export default zh;
五、en.js 代码
const en = {
admin: 'admin',
test: 'hello',
language: {
zh: '中文',
en: 'English',
},
}
export default en;
六、main.js引入i18n,并挂载至vue实例
//引入i18n国际化
import i18n from './i18n/';
new Vue({
el: '#app',
i18n,
render: h => h(App)
})
七、使用
1、在标签内作为正文内容
<div>{{$t("admin")}}</div>
2、作为标签属性使用
<input :placeholder="$t('test')">
3、作为js中文字使用
console.log(this.$t("language.zh"))
八、改变语言
this.$i18n.locale = "zh");
demo
<template>
<div id="test-ka">
<h3>国际化翻译</h3>
<p>{{$t("test")}}</p>
<p>{{$t("admin")}}</p>
<p>
<el-button @click.native="changeType('zh')">切换中文</el-button>
<el-button @click.native="changeType('en')">切换英文</el-button>
</p>
</div>
</template>
<script>
export default {
date() {
return {}
},
methods:{
changeType(type){
this.$i18n.locale = type;
}
}
}
</script>
笔记:
此文章说的是vue版的,不依赖element ui
如果项目运行失败,查看报错是不是少安装了依赖,按照提示安装即可
上一篇: 电影海报的经典接吻镜头画面