vue-i18n 国际化教程

安装

npm install vue-i18n

注意： 此处我的i18n版本是8.23.0

与之对应的我的vue版本是2.5.2，如果你的i18n版本高于我且vue版本等于或者低于我

很可能会有如下报错

# [IN ./NODE_MODULES/VUE-I18N/DIST/VUE-I18N.ESM-BUNDLER.JS 1109:18-19 "EXPORT '](https://www.cnblogs.com/tszr/p/16015328.html)

这时只需要把i18n版本降低即可

准备

在src下新建一个文件夹language，再准备三个文件zh.js,en.js,index.js

然后在其中写入如下代码

//en.js英文js文件
export const lang = { 
  test: 'English',//英文
}

//zh.js中文js文件
export const lang = {
  test:'中文',
}

// index.js
import en from "./en";
import zh from "./zh";
export default {
  en,
  zh
};

引入

我们在main.js中写入如下代码

import VueI18n from 'vue-i18n'
 
Vue.use(VueI18n) //全局引入
 
const i18n = new VueI18n({
    locale: 'zh-CN',    // 语言标识
    fallbackLocale: 'zh-CN', //默认中文语言
    silentFallbackWarn: true,//抑制警告
    messages: {
      'zh-CN': require('./language/zh'),   // 中文
      'en-US': require('./language/en')    // 英文
    }
})
 
new Vue({
  el: '#app',
  i18n,  // 挂载
})

使用

在需要写入的文件中加上如下点击事件即可切换中英文

//html
<div @click="changeLangEvent" class="changeLang">{{$t('lang.test')}}</div>

//js
changeLangEvent() {
  if ( this.lang === 'zh-CN' ) {
    this.lang = 'en-US';
    this.$i18n.locale = this.lang;//英文    
  }else {
    this.lang = 'zh-CN';
    this.$i18n.locale = this.lang;//中文    
  }
}

具体实现

// 普通引入：
<span>{{$t('lang.test')}}</span>

// value等属性值引入：
<input type="text" v-model="description" :value=" $t('lang.test')" />

// 三目运算引入:
<span>{{flag?flag:$t('lang.test')}}</span>

this.$t('lang.test');

//.js文件中中使用
window.vm= new Vue({});
window.vm.$i18n.t('lang.test');

Tips

1. 修改index里面的<title>

  document.getElementsByTagName("title")[0].innerText = window.vm.$i18n.t('lang.title');

2. 在main.js中写入

let lang = window.sessionStorage.getItem('lang')||'zh-CN';
const i18n = new VueI18n({
    locale: lang,    //防止默认语言更改
    ...
})

点击事件中加入

changeLangEvent() {
  if ( this.lang === 'zh-CN' ) {
    ...
    window.sessionStorage.setItem('lang', this.lang); //防止默认语言更改
  }else {
    ...
    window.sessionStorage.setItem('lang', this.lang); //防止默认语言更改
  }
}

可以有效防止刷新之后语言回到初始化状态的情况

btw:文中代码到底怎么变色啊，谁知道能告诉我一下吗，谢谢！！