vue中使用国际化基础使用

Kosmos 发布于2019-08-26 10:37 / 2951人阅读

摘要：方式使用引入要在之后引入使用你好当前语言重新设置中文英文其他当前语言切换语言效果项目中使用安装使用入口文件增加以下代码可以创建文件夹，拆分国际化文件最后引入国际化保存对象你好引用模板当前语言切换语言当前语言重新设置中文英文其他效

cdn方式使用

1.引入

vue-i18n要在vue之后引入

2.使用

const messages = {
    "zh_CN": {
        "hello": "你好 {name}",
    },
    "en_US": {
        "hello": "hello {name}",
    }
}

var i18n = new  VueI18n({
    locale: "zh_CN",
    messages
})
var vm = new Vue({
    data: {
        
    },
    el: "#root",
    i18n,
    methods: {
        toggleLang : function(){
            let lang = this.$i18n.locale //当前语言
            this.$i18n.locale = lang==="zh_CN" ? "en_US" : "zh_CN" //重新设置
        }
    },
    computed: {
        lang: function(){
            switch (this.$i18n.locale) {
                case "zh_CN": return "中文";
                case "en_US": return "英文";
                default: return "其他";
            }
        }
    }
})

html


    当前语言: {{ lang }}
    {{ $t("hello", { name:"vue" } ) }}

3.效果

vue-cli项目中使用

1.安装
npm install vue-i18n

2.使用
入口文件main.js增加以下代码

import VueI18n from "vue-i18n"
Vue.use(VueI18n)

// 可以创建i18n文件夹，拆分国际化文件 最后import引入
const messages = {      // 国际化保存对象
    "zh_CN": {
        "hello": "你好 {name}",
    },
    "en_US": {
        "hello": "hello {name}",
    }
}

const i18n = new VueI18n({
  locale: "zh_CN",
  messages,
})



new Vue({
  el: "#app",
  router,
  components: { App },
  template: "",
  i18n  //引用
})

模板

script

export default {
    name: "testLang",
    methods: {
        toggleLang () {
            let lang = this.$i18n.locale //当前语言
            this.$i18n.locale = lang==="zh_CN" ? "en_US" : "zh_CN" //重新设置
        }
    },
    computed: {
        lang () {
            switch (this.$i18n.locale) {
                case "zh_CN": return "中文";
                case "en_US": return "英文";
                default: return "其他";
            }
        }
    }
}

效果和cdn方式一样

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106504.html

记一次开源学习--D2Admin 人人企业版

摘要：前言上个月月底开源组开源了使用适配人人企业版专业版的前端工程具体详情见人人企业版适配发布。当然，也督促自己产出一篇相关的文章，来记录这次有趣的学习之旅。 Created by huqi at 2019-5-5 13:01:14 Updated by huqi at 2019-5-20 15:57:37 前言上个月月底@D2开源组开源了使用 D2Admin 适配人人企业版(专业版) 的...

notebin 2019-05-21 19:46 评论0 收藏0
程序员到底要学什么？

摘要：程序员到底要学什么程序员到底要学什么或者说，程序员到底要学多少东西呢这个问题问到你了吗今天就来简单聊一聊程序员的学习之路。程序员的种类很多，这里只讲前端工程师和后端工程师，因为自己也就接触到这两个层面。 ...

mo0n1andin 2021-09-28 09:36 评论0 收藏0
第三方库

摘要：微信支付，支付宝支付，银联支付三大支付总结支付宝植入总结支付宝的植基于和百度地图的组件库基于百度地图封装的组件库，使用这个库最好需要先了解和百度地图。 Commento - 多说 & Disqus 开源替代品 Commento - 多说 & Disqus 开源替代品 anime.js 简单入门教程强大轻量的动画库 anime.js 入门教程来自B站的开源的MagicaSakura源...

seanHai 2019-08-22 13:58 评论0 收藏0
第三方库

摘要：微信支付，支付宝支付，银联支付三大支付总结支付宝植入总结支付宝的植基于和百度地图的组件库基于百度地图封装的组件库，使用这个库最好需要先了解和百度地图。 Commento - 多说 & Disqus 开源替代品 Commento - 多说 & Disqus 开源替代品 anime.js 简单入门教程强大轻量的动画库 anime.js 入门教程来自B站的开源的MagicaSakura源...

gityuan 2019-08-29 14:17 评论0 收藏0