admin管理员组文章数量:1583923
实现中英文翻译切换以及cookie 存储
需要安装以下依赖
npm install vue-i18n --save
npm install js-cookie --save
main.js 内 注入i18n
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
Vue.use(ElementUI)
Vue.use(VueI18n)
//使用语言包
const i18n = new VueI18n({
locale: Cookies.get('language') || 'zh',
messages:{
en:require("@/assets/i18n/langs/en.js"), //英文文件路径
zh:require("@/assets/i18n/langs/zh.js"), //中文文件路径
},
silentTranslationWarn: true
})
Vue.config.productionTip = false
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount('#app')
新建 中英文js文件
zh.js
module.exports = {
navBar:{
home:"首页",
name:"张三"
}
}
en.js
module.exports = {
navBar:{
home:"HOME",
name:"zhangsan"
}
}
需要引入翻译的文件 实例代码:
<template>
<div id="translate" class="translate">
<p>{{ $t('navBar.home')}}</p>
<p>{{ $t('navBar.name')}}</p>
<el-button
@click="changeLaguages"
type="default"
>切换语音</el-button>
</div>
</template>
<script type="text/javascript">
import Cookies from 'js-cookie'
export default {
name: "translate",
data() {
return {
lang: Cookies.get('language') || 'zh',
}
},
components: {
},
methods:{
changeLaguages () {
console.log(this.$i18n.locale)
let lang = this.$i18n.locale === 'zh' ? 'en' : 'zh'
this.$i18n.locale = lang;
Cookies.set("language",lang)
}
}
}
</script>
<style lang="less" scoped>
p{
padding: 10px 0;
}
</style>
版权声明:本文标题:vue-i18n 中英文翻译 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1725597877a1032071.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论