项目使用i18n

项目中更加模块化的使用i18n

新建一个i18n文件夹

  i18n
    -- en-US.json   // JSON文件是编译语言的映射表
    -- zh-CN.json
    -- index.js     //配置



\\ index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './en-US.json'
import cn from './zh-CN.json'

Vue.use(VueI18n)

export default 
createdI18n => new VueI18n({
    locale:'zh-CN',
    messages:{
        "en-US":en,
        "zh-CN":cn
    }
})
//引入并 初始化一个i18n的实例



\\ main.js
import Vue from 'vue';
import App from './App';
import router from './router';
import createdI18n from './components/i18n'

const i18n = createdI18n()

new Vue({
  el: '#app',
  router,
  i18n,
  render: h => h(App)
}).$mount('#app');

// 添加在Vue的根实例中。

配置好以后，可以正式使用了。

     <template>
     <a class="locale" href="javascript:void(0);"
           v-for="locale in locales"
           :class="{ active: $i18n.locale === locale }"
           @click="$i18n.locale = locale">{{ $t('locales.' + locale) }}</a>
      </telampte>    
           
      <scritp>
             //渲染更改语言的按钮
        export default {
                    data () {return { locales: ['en-US', 'zh-CN'] }
                    }
                }
    </scritp>

        <router-link to="/top">{{ $t('navigation.top') }}</router-link>
        <router-link to="/new">{{ $t('navigation.new') }}</router-link>
        <router-link to="/show">{{ $t('navigation.show') }}</router-link>
        <router-link to="/ask">{{ $t('navigation.ask') }}</router-link>
        <router-link to="/job">{{ $t('navigation.job') }}</router-link>
<!-- 
语法： 使用双大括号  {{ $t('xx') }}
    $t() 填写JSON文件的替换值
-->