前端国际化语言实现-vue3版

 这里使用的是i18n语言包

一、项目中下载语言包

npm install vue-i18n

二、 新建文件用来存放语言模块 目录(自定义)：src/language

        1. 文件使用说明

2. zh.js / en.js 文件内容举例

export default {

  common:{

    name:'芙莉莲',

  }

}

3. element_lang 文件内容

import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

import en from 'element-plus/dist/locale/en.mjs'

export default {

  zh: zhCn,

  en: en

}

4. index.js 文件内容

import { createI18n } from 'vue-i18n';
import zh from './config/zh';
import en from './config/en';
import eleLang from './element_lang' //elementplus 
const messages = {
  en,
  zh,
};
const language = (navigator.language || 'en').toLocaleLowerCase(); // 这是获取浏览器的语言
let lang = localStorage.getItem('lang') || language.split('-')[0] || 'en' // 首先从缓存里拿，没有的话就用浏览器语言，
const i18n = createI18n({
  legacy: false,
  locale: lang,  // 指定应用的初始语言环境
  fallbackLocale: 'en', // 设置备用语言
  messages,
});
export const locale = eleLang[lang]
export default i18n;

三、main.js 文件中引入使用

1.  main.js 文件内容

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import ElementPlus from "element-plus"
import "element-plus/dist/index.css"
import i18n ,{locale} from './language' //语言包
import { createPinia } from 'pinia' // 菠萝
import piniaPersist from "pinia-plugin-persist" //菠萝持久化存储
const pinia = createPinia()

const app = createApp(App)
app.use(i18n)
pinia.use(piniaPersist)
app.use(pinia)
app.use(router)
app.use(ElementPlus,{
  locale:locale,
})
app.mount('#app')

四、页面使用国际化语言 $t("")

<div class="right">{{ $t("common.name") }}</div>

五、却换操作部分

  1. 这里只是为了方便演示-所以多余的代码都进行了删除

<template>
  <div>
    <el-select v-model="value" placeholder="请选择" @change="languageChange">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </div>
  <div>{{ $t("common.name") }}</div>
</template>
<script setup>
import { ref } from "vue-demi";
import useAppStore from "@/store/modules/app"; // 定义的
const appStore = useAppStore();
const value = ref("");
const options = ref([
  { label: "中文", value: "zh" },
  { name: "英文", value: "en" },
]);
function languageChange(val) {
  appStore.setLanguage(val); //使用
  setTimeout("window.location.reload()", 1000); // 刷新页面
}
</script>

六、store/modules/app文件下的内容

import { defineStore } from 'pinia'
const language = (navigator.language || "en").toLocaleLowerCase() //获取浏览器的语言
const useAppStore = defineStore(
  'app',
  {
    state:()=>(
      {
        language:localStorage.getItem('lang') || language.split('-')
      }
    ),
    actions:{
      setLanguage(lang) {
        this.language = lang // 存储
        localStorage.setItem('lang',lang)
      }
    },
    persist:{
      enabled:true //开启持久化
    }
  }
)
export default useAppStore

 注意：设置了语言需要让其刷新页面也保留，这里可以使用本地存储来解决，