vue实现中英文切换

第一步：安装插件vue-i18n，npm install vue-i18n

第二步：在src下新建locales文件夹，并在locales下新建index.js、EN.js、CN.js文件

第三步：在EN.js和CN.js文件下配置你想要的字段，例如：

//CN.js：

export default{

index:{

home:'首页'

}

}

//EN.js：

export default{

index:{

home:'home'

}

}

第四步：在index.js文件夹下，引入EN.js和CN.js

import { createI18n } from "vue-i18n";

import CN from "./CN";

import EN from "./EN";

// 创建i18n

const i18n = createI18n({

  locale: localStorage.getItem("language") || "CN", // 语言标识

  globalInjection: true, // 全局注入,可以直接使用$t

  // 处理报错: Uncaught (in promise) SyntaxError: Not available in legacy mode (at message-compiler.esm-bundler.js:54:19)

  legacy:false,

  messages: {

    CN,

    EN

    }

})

export default i18n;

第四步：在main.js文件中引入

import vue3TreeOrg from "vue3-tree-org";

import "vue3-tree-org/lib/vue3-tree-org.css";

app.use(vue3TreeOrg);

第五步：在vue文件的template中使用

<div>{{ $t("index.home") }}</div>

第六步：调用方法改变index.js文件中的local字段的值，即可完成中英文切换

let { proxy } = getCurrentInstance()

const changeLanguage = (value) => {

proxy.$i18n.locale = value

}