vue国际化

前言

现在的大公司都走国际化路线，我们应用程序也不例外。今天就在 Vue3 项目中整一个比较简单的国际化

背景

之前搞国际化的时候，也搜索了很多帖子，但是没有一个可以完整的实现。今天有空搞了一版，大家有什么问题欢迎留言探讨

项目框架

vite + vue3 + elementPlus + vue-i18n + vue-cookie

一、准备工作

首先需要安装两个三方件
1、国际化三方件：vue-i18n
npm install vue-i18n
2、cookie 三方件：vue-cookie
npm install vue-cookie

二、国际化

1、在项目中创建一个 local 目录，再在 local 目录下面创建一个 lang 目录 和 index.ts 文件

2、 index.ts 文件

import { createI18n } from "vue-i18n"
import enLang from "./lang/en"
import zhLang from "./lang/zh"
import VueCookie from "vue-cookie"

//从 cookie 中获取语言，如果没有则默认为 中文
const defaultLang = VueCookie.get("local") || "zh"

const i18n = createI18n({
  locale: defaultLang, //默认语言
  fallbackLocale: "zh",
  messages: {
    en: enLang,
    zh: zhLang
  } //设置语言内容
})

export default i18n

3、main.ts 文件

import i18n from './router/local/index'
app.use(i18n)

4、zh.ts 文件

export default {
    system: {
        lang: "中文"
    },
    table: {
        name: "王小龙",
        address: "上海市普陀区金沙江路 1517 弄"
    }
}

5、en.ts 文件

export default {
    system: {
        lang: "en"
    },
    table: {
        name: "Wang Xiaolong",
        address: "Lane 1517, Jinshajiang Road, Putuo District, Shanghai"
    }
}

6、home.vue 文件

<!-- home.vue -->
<template>
    <el-button @click="changeLanguage">{{ $t("system.lang") }}</el-button>
    <el-table
      :data="tableData"
      row-key="id"
    >
      <el-table-column type="selection" :reserve-selection="true" width="55" />
      <el-table-column prop="date" label="日期" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="address" label="地址" />
    </el-table>
</template>
<script setup lang="ts">
import { ref } from "vue";
import VueCookie from "vue-cookie"
import { useI18n } from "vue-i18n"

//国际化
const { t } = useI18n()

//当前语言
let isZH = ref(VueCookie.get("local") != "en");

/**
 * 切换语言
 */
const changeLanguage = () => {
    VueCookie.set( "local", isZH.value ? "en" : "zh");
    //对页面进行重新挂载
    location.reload()
}

const tableData = ref([
  {
    id: 1,
    date: "2016-05-02",
    name: t("table.name"),
    address: t("table.address"),
  },
  // ...更多数据
  {
    id: 2,
    date: "2016-05-02",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1518 弄",
  },
  {
    id: 3,
    date: "2016-05-02",
    name: "王小保",
    address: "上海市普陀区金沙江路 1519 弄",
  },
]);
</script>