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 文件