vue-cli项目简单实现国际化i18n

vue-cli项目简单实现国际化

1.npm下载vue-i18n

vue-cli项目根路径下：

npm i vue-i18n

我下载的版本是：

"vue-i18n": "^7.6.0"

2.文件目录

3.文件内容

en.js

export const m = {
    
     
  name: 'name',
  age: 'age'
}

zh.js

export const m = {
    
    
  name:'姓名',
  age:'年龄'
}

index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
    
    
    locale: 'zh',    // 语言标识
    messages: {
    
    
      'zh': require('./config/zh'),   // 中文
      'en': require('./config/en')    // 英文
    }
})
export default i18n;

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入国际化文件
import i18n from './lang/index'

Vue.config.productionTip = false

new Vue({
    
    
  router,
  store,
  i18n, //国际化
  render: h => h(App)
}).$mount('#app')

4.组件内容

<template>
  <div class="home">
    <h1>国际化</h1>
    <p>{
   
   {$t('m.name')}}</p>
    <p>{
   
   {$t('m.age')}}</p>
    <button @click="changeLang('en')">英文</button>
    <button @click="changeLang('zh')">中文</button>
  </div>
</template>

<script>

export default {
  name: 'Home',
  methods:{
      /**
       * 语言切换
       * @param {string} lang 语言类型
       * @return {void}
       */
      changeLang(lang){
          // 通过this.$i18n.locale来切换语言类型
          this.$i18n.locale=lang;
      }
  }
}
</script>

5.页面效果

英文：

中文：