关于vue.js:vue01切换语言基础版

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/>'
})