Vue多国语言实践

1.安装

vue2.6.10版本，不知道为什么不加-S  就找不到vue-i18n

i18n官网明确了使用版本，vue2和vue3分别不一样，vue2使用8版本，vue3使用9版本，安装时需要注意版本号

所以vue2.6.10版本

 npm install vue-i18n@8.27.0

vue3或者以上直接使用命令

npm install vue-i18n -S

2.在main.js里配置il8n

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

3.创建il8n实例在main.js中挂载
3-1.实例文件夹：

import VueI18n from 'vue-i18n'
const i18n = new VueI18n({ // 双语
  locale: 'zh',
  messages: {
    'zh': require('./components/lang/zh'),
    'en': require('./components/lang/en')
  },
})
export default i18n;

3-2.main.js里引用挂载

import i18n from '@/lang'
var vue = new Vue({
  el: '#app',
  i18n,
})

4.实现切换语言
4-1.vue2

Language(lan){
 this.$i18n.locale = lan
 localStorage.setItem('lang',lan)
}

4-2.vue3

import { useI18n } from "vue-i18n";
setup(props, context) {
  const { locale,t } = useI18n();
  const languageChange = (lan) => {
   locale.value = lan;
   localStorage.setItem("lang", lan);
 };
 return {
   t,
   languageChange
 };
},

5.显示文字
5-1.vue2使用
html部分

<input type="text" :placeholder="$t('user.loginUsername')"  v-model="username" />

js部分

this.$t('user.loginUsername')

5-2.vue3使用
html部分（跟vue2一样）

 <input type="text" :placeholder="$t('user.loginUsername')"  v-model="username" />

js部分

 // 引入il8n配置文件
import i18n from '../../../language/index'
i18n.global.t('user.loginUsername')

6.router通过不同参数来实现统一后缀语言切换