闲话

各位大佬如有不对请指正！！！

有更好的想法也欢迎在评论区交流！！！

配置

安装

在项目根目录执行命令安装需要的包

使用npm安装

npm install vue-i18n@9   //版本自己选择

使用yarn安装

yarn add vue-i18n@9

配置自己需要的语言包

我们通常会建立一个lang文件夹来存放自己语言包

//在src/lang/zh-CN.js
//在这里只做少量的示例
export default{
    lang:"你好"
}

//在src/lang/en.js

export default {
    lang:'hello'
}

配置vue-i18n

我们配置好自己需要的语言包后在index.js文件里导入和配置vue-i18n

//在src/lang/index.js

import { createI18n } from 'vue-i18n';
import zhCN from './zh-CN';
import en from './en';
const messages={
    zhCN,
    en
}

export  default createI18n({
    locale: 'zhCN',   //控制使用哪门语言
    globalInjection: true, // 全局注册$t方法
    messages,   //语言包
    legacy: false    // 如果要支持compositionAPI，此项必须设置为false;
  });

//   export const $t = i18n.global.t    也可以使用这种方法注册于语言包

在main.js中注册

我们在main.js文件中注册 vue-i18n

import i18n from './lang'
app.use(i18n)

使用

在这里我只做基本使用介绍，更多操作可以前往Vue I18n | Vue I18n (intlify.dev)

等我用到时再更新吧，嘿嘿嘿

在html中使用

在html中基本使用如下，语言包对应上面滴

  <span >{{ $t("lang") }}</span>
//结果是   <span >你好</span>

在<script>标签里使用

//我们需要先引入useI18n
import { useI18n } from "vue-i18n";

const {  t } = useI18n();     //解析出t方法

console.log(t("lang"));     //结果为你好

在js文件中使用

我们如果需要在js文件中使用，和前面两种情况也是不一样

如我们在router/index.js下使用时

import i18n from '../lang/index'
router.beforeEach(()=>{
    console.log(i18n.global.t("lang"));  //结果为你好
})

改变语言

import { useI18n } from "vue-i18n";
const { locale } = useI18n();
let chanagelang = () => {
  locale.value = locale.value == "zhCN" ? "en" : "zhCN";   //只要改变locale的值就可以改变，这里只做基本示范
};