vue-01.切换语言-基础版

4个文件

---

npm install vue-i18n
en.js

export const m = {
  music: 'Music', // 网易云音乐
  findMusic: 'FIND MUSIC', // 发现音乐
  myMusic: 'MY MUSIC', // 我的音乐
  friend: 'FRIEND', // 朋友
  musician: 'MUSICIAN', // 音乐人
  download: 'DOWNLOAD' // 下载客户端
}

zh.js

export const m = { music: '网易云音乐', findMusic: '发现音乐', myMusic: '我的音乐', friend: '朋友', musician: '音乐人', download: '下载客户端' }

helloworld

<!--
 * @Author: your name
 * @Date: 2020-07-21 10:01:23
 * @LastEditTime: 2020-07-21 10:32:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \01\src\components\HelloWorld.vue
-->
<template>
  <div class="hello">
    <button @click="changeLangEvent">切换语言</button>
<p>vue-i18n 数据渲染的模板语法
我们知道 vue 中对于文字数据的渲染，有以‘’{}‘’或者 v-text、v-html等的形式，同样的使用国际化后，依旧可以沿用，但需要一点修改。</p>
    <span v-text="$t('m.music')"></span>

    <span>{{$t('m.music')}}</span>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    changeLangEvent () {
      var r = window.confirm('确定切换语言吗?')
      debugger
      if(r === true) {
          if(this.$i18n.locale === 'zh-CN') {
            this.lang = 'en-US'
          } else {
            this.lang = 'zh-CN'
          }
          this.$i18n.locale = this.lang
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n) // 通过插件的形式挂载
const i18n = new VueI18n({
  locale: 'zh-CN', // 语言标识
  // this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {
    'zh-CN': require('./common/lang/zh'), // 中文语言包
    'en-US': require('./common/lang/en') // 英文语言包
  }
})

Vue.config.productionTip = false

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