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