Vue插件---vue-i18n语言包

最新推荐文章于 2023-08-14 17:04:33 发布

WeiflR10

最新推荐文章于 2023-08-14 17:04:33 发布

阅读量634

点赞数

本文链接：https://blog.csdn.net/WeiflR10/article/details/100043702

版权

可参考：https://segmentfault.com/a/1190000015008808

第一步：安装vue-i18n （npm install vue-i18n）

第二步：在main.js中导入

import Vuei18n from 'vue-i18n'

第三步：在main.js使用

Vue.use(Vuei18n)

第四步：在main.js挂载实例化


const i18n=new Vuei18n({
  locale:'zh-CN',
  fallbackLocale:'zh-CN',
  messages:{
    'zh-CN':require("./components/lang/zh"),
    'en-US':require("./components/lang/en")
  },
  silentTranslationWarn: true,   //vue-i18n.esm.js:14 [vue-i18n] Cannot translate the value of keypath 'xxx'.
                                // Use the value of keypath as default.   报错时加上这个参数可消除警告
})

new Vue({
  el: '#app',
  i18n,
  router,
 
  components: { App },
  template: '<App/>'
})

第五步：创建文件夹lang，包含en.js和zh.js。数据如下

module.exports={
    index:{
        1:"Hello",
        2:"Dad",
        3:"Mom",
        4:"Grandpa",
        5:"Grandma",
        6:"Daughter",
        7:"Son",
        8:"中文"
    }
}

module.exports={
    index:{
        1:"您好",
        2:"爸爸",
        3:"妈妈",
        4:"爷爷",
        5:"奶奶",
        6:"女儿",
        7:"儿子",
        8:"English"
    }
}

第六步：在根组件中渲染绑定

<li>{{$t('index.1')}}</li>

上面是添加locals文件夹的写法，也可以按以下方式写

安装---导入---使用

//实例化、挂载
const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}

const i18n = new VueI18n({
  locale: 'ja', // set locale
  messages, // set locale messages
})

渲染