国际化语音包使用

文档使用:https://kazupon.github.io/vue-i18n/zh/guide/formatting.html#%E5%85%B7%E5%90%8D%E6%A0%BC%E5%BC%8F
# 首先我们在项目中安装vue-i18n依赖包:
npm install vue-i18n --save 
创建语言包(来自你项目中的所有文案),i18n实例,并在main.js文件中引入:
文件目录结构
|-- main.js 导入文件
|-- i18n
  |-- index.js 创建实例对象
  |-- locale 各种语言包
    |-- en.js  英文包
    |-- zh.js  中文包
# zh.js
module.exports = {
    loginPage: {
        login: '登录999999',
        register: '注册',
        homeOverview:'首页概览',
        firmOverview:'公司概述',
        firmReports:'财务报表',
        firmAppendix:'更多附录',
        firmIndex:'主要财务指标',
        firmAnalysis:'对比分析',
        firmNews:'新闻事件档案',
        firmOther:'其他功能',
    }
}
# en.js
module.exports = {
    loginPage: {
        login: 'login',
        register: 'regiter',
        homeOverview:'Home overview',
        firmOverview:'firmOverview',
        firmReports:'firmReports',
        firmAppendix:'firmAppendix',
        firmIndex:'firmIndex',
        firmAnalysis:'firmAnalysis',
        firmNews:'firmNews',
        firmOther:'firmOther'
        
    }
  }
# i18n/index.js 创建i18n实例对象,代码如下
import Vue from 'vue'
import VueI18n  from 'vue-i18n'
import zh from './zh'
import en from './en'
Vue.use(VueI18n)

const i18n = new VueI18n({
    locale: 'zh-CN',    // 语言标识, 通过切换locale的值来实现语言切换,this.$i18n.locale 
    messages: {
      'zh-CN': zh,   // 中文语言包
      'en-US': en    // 英文语言包
    }
})
export default i18n;

# 在main.js文件中引入i18n实例并挂载到Vue实例上即可:
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import i18n from './i18n/index';

new Vue({
    i18n,  // 挂载到Vue实例之上
    router,
    store,
    render: (h) => h(App),
}).$mount("#app");
# 实现语言切换组件,代码如下:
  

# 模板渲染
静态渲染: {{$t('xx .xxx')}}

{{$t('lang .homeOverview')}}
uI组件中使用:
比如:label="用户姓名" 就改成 :label="$t('order.userName')"
动态渲染:
{{navCompany}}
 computed:{
      navCompany:function(){
        if(this.nav_company){
          let str = 'lang'+this.nav_company; //拼接返回使用
          return this.$t(str);
        }
      }
},
@原文章地址:https://segmentfault.com/a/1190000014229902

你可能感兴趣的:(国际化语音包使用)