zoukankan      html  css  js  c++  java
  • Vue-i18n实现语言切换

    方法1 Vue — i18n 国际化 全局配置 

    安 装

    1.直接引入js文件

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

    2.NPM安装

    npm install vue-i18n

    安装Yarn

    yarn add vue-i18n

    main.js

     1 import Vue from 'vue'
     2 import VueI18n from 'vue-i18n'
     3 Vue.use(VueI18n)
     4 
     5 const i18n = new VueI18n({
     7 //切换语言直接修改locale的值即可
      //this.$i18n.locale = ..
    8 locale: 'zh-CN', 10 //使用require引入中英文文件 11 messages:{ 12   "EN": require('./EN.js'), 13   "zh-CN": require('./zh-CN.js') 14   } 15 }) 16 18 new Vue({ 19 el: '#app', 20 i18n, 21 router, 22 template: '<app/>', 23 components: { 24   app,
        i18n
    25   } 26 })

    ZN.js

    1 export const message = {
    2   AllProduct: '全部产品',
    3   LatestReports:"最新报道"
    4 }

    EN.js

    1 export const message = {
    2   AllProduct: 'ALL PRODUCT',
    3   LatestReports: "LATEST REPORTS"
    4 }

    index.vue

    1 <template>
    3   <div>
    5     {{$t('message.AllProduct')}}
    7   </div>
    9 </template>

    //全部产品

    还有一种配置全局变量得方法, 不过不建议使用, 就不贴上来了!

     

     

  • 相关阅读:
    Python---列表相关操作
    PyCharm使用小技巧--git上传代码至远程仓库
    Linux下修改文件权限
    Linux运行jmeter
    Jmeter添加负载机
    git使用
    Linux之12——常用统计命令之uniq
    Linux之11——常用统计命令之sort
    Linux之10——dd命令详解
    Linux之8——性能调优之iostat命令详解
  • 原文地址:https://www.cnblogs.com/AKI-LILI/p/7698004.html
Copyright © 2011-2022 走看看