【前端基础知识】vue实现国际化（vue-il8n）

最新推荐文章于 2025-06-12 18:00:19 发布

@Dai

最新推荐文章于 2025-06-12 18:00:19 发布

阅读量704

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 vue.js javascript html vue

本文链接：https://blog.youkuaiyun.com/weixin_46318413/article/details/127247717

前端专栏收录该内容

49 篇文章

订阅专栏

本文介绍如何使用vue-i18n插件实现Vue项目的多语言支持。包括安装配置、定义语言文件、在main.js中引入及页面上使用的方法。同时提供手动切换语言的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：安装

npm install vue-i18n
yarn add vue-i18n

第二步：创建并定义语言文件

在这里插入图片描述

//en.js
export default {
    login: {
        'login': 'login',
        'userName': 'userName',
    },
    '姓名':'name'
};

//zh.js
export default {
    login: {
        'login': '登录',
        'userName': '用户名',
    },

    '姓名':'姓名'
};

//index.js
import { createI18n } from "vue-i18n";
import zh from "./lang/zh";
import en from "./lang/en";

const messages = {
    en,
    zh
};

const language = (navigator.language || 'en').toLocaleLowerCase();//获取浏览器语言
const i18n = createI18n({
    locale:localStorage.getItem('lang') || language.split('-')[0] || 'en',
    fallbackLocale:'en',//备用语言
    messages
})

export default i18n;

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

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'

createApp(App).use(i18n).mount('#app')

第四步：在页面中使用

<template>
  <div>{{$t('login.userName')}}</div>
  <div>{{$t('姓名')}}</div>
</template>

这是因为浏览器的语言是中文，所以展示中文，可以通过修改浏览器语言来验证
在这里插入图片描述

手动切换语言

<template>
  <div>{{$t('login.userName')}}</div>
  <div>{{$t('姓名')}}</div>


  <button class="btn" @click="changeLang('zh')">zh</button>
  <button class="btn" @click="changeLang('en')">en</button>
</template>
<script lang="js">
import i18n from './i18n'

export default {
  name: 'App',
  setup() {

    const changeLang = (lang) => {
      i18n.global.locale = lang;//修改全局的语言
      localStorage.setItem('lang',lang);//修改本地缓存的语言
    }

    return {
      changeLang
    }
  }
}
</script>