vuei8n国际化

首先在src文件夹下创建i8n文件夹，在文件夹里创建i18n.js，然后在里面床架langs文件夹用来放语言包.

下载插件

npm install vue-i18n@next

i18n.js里面

import { createI18n } from "vue-i18n"; // 引入vue-i18n组件
import zh from "./langs/zh";
import en from "./langs/en";
//注册i18n实例并引入语言文件
const i18n = createI18n({
locale: localStorage.getItem("lang") || "zh", // 语言标识（缓存里面没有就用中文）
fallbackLocale: "zh", //没有英文的时候默认中文语言
messages: {
en,
zh
}
});
export default i18n;

在main.js里面引入

import i18n from './i18n/i18n' 

这里是vue3的例子，所以：

const app = createApp(App)
app.use(i18n)

然后再langs文件夹里创建两个或者更多的语言包

 语言包里使用export default导出相对应的语言比如en.js里：

export default {
  login: {
    title: 'User Login',
    loginBtn: 'Login',
    usernameRule: 'Username is required',
    passwordRule: 'Password cannot be less than 6 digits',
    desc: `
    <dl>
        <dt>Test authority account:</dt>
        <dd>Provide three kinds of authority accounts:：</dd>
        <dd>1. Super administrator account: super-admin </dd>
        <dd>2.Administrator account: admin </dd>
        <dd>3. 测试可配置账号：test</dd>
        <dd>3. Test configurable account:test </dd>
      </dl>
      <dl>
        <dt>Import user account:</dt>
        <dd>You can log in with the imported username </dd>
        <dd>The password is unified as: 123456</dd>
        <dd><strong>Note: Import user-discriminatory Chinese and English libraries! ! ! !</strong></dd>
      </dl>
    `
  },
}

再zh.js里对应： 

export default {
  login: {
    title: '用户登录',
    loginBtn: '登录',
    usernameRule: '用户名为必填项',
    passwordRule: '密码不能少于6位',
    desc: `
    <dl>
        <dt>测试权限账号：</dt>
        <dd>提供三种权限账号：</dd>
        <dd>1. 超级管理员账号： super-admin</dd>
        <dd>2. 管理员账号：admin</dd>
        <dd>3. 测试可配置账号：test</dd>
        <dd>密码统一为：123456</dd>
      </dl>
      <dl>
        <dt>导入用户账号：</dt>
        <dd>可使用导入的用户名登录</dd>
        <dd>密码统一为：123456</dd>
        <dd><strong>注意：导入用户区分中英文库！！！！</strong></dd>
      </dl>
    `
  },
}

在页面中相应的文字用这种方式书写：

{{ $t("login.title") }}

这里的login是语言包里的自己分的类，意思就是谁的谁，外面的花括号和$t('')是语法，值得注意的是如果页面里的内容是需要js里面改变的话那么需要放在计算属性里：

 proxy.$t('route.user')

proxy是代替了vue2的this，

下面是一个例子：

let mm =computed(()=>{
      return [
        {
          name: proxy.$t('route.user'),
          children: [
            {
              name: proxy.$t('route.userManage'),
              path:
                proxy.$store.state.Menu?.data?.permission.menus[0].slice(0, 4) +
                "/" +
                proxy.$store.state.Menu?.data?.permission.menus[0].slice(
                  4,
                  Infinity
                ),
            },
            {
              name: proxy.$t('route.roleList'),
              path:
                "user/" +
                proxy.$store.state.Menu?.data?.permission.menus[1].slice(0, 4),
            },
            {
              name: proxy.$t('route.permissionList'),
              path:
                "user/" +
                proxy.$store.state.Menu?.data?.permission.menus[2].slice(0, 10),
            },
          ],
        },

最后就是利用点击事件切换语言了，这里使用了ui库的下拉菜单，主要还是里面的点击事件：

<span class="fangda" style="margin-right: 15px">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <el-icon :size="28">
                  <Connection />
                </el-icon>
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item 
                  :disabled="lang == 'ch'" 
                  @click="i18n('ch')"
                    >中文</el-dropdown-item
                  >
                  <el-dropdown-item
                    :disabled="lang == 'en'"
                    @click="i18n('en')"
                  >
                    English
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </span>

对应js里的事件：

i18n: () => {
        var locale = localStorage.getItem("lang") == "zh" ? "en" : "zh";
        localStorage.setItem("lang", locale);
        state.lang == "zh" ? (state.lang = "en") : (state.lang = "zh");
        store.commit("langs");
        proxy.$i18n.locale = locale;
      },

这里改变state.lang是用来判断页面中的可不可以点击的（disabled）：

 const state = reactive({
      lang: "zh",
    });