vue项目使用 vue-i18n 切换中英文

最新推荐文章于 2025-09-22 14:51:19 发布

原创

最新推荐文章于 2025-09-22 14:51:19 发布 · 838 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了如何在Vue项目中利用vue-i18n进行中英文切换。首先，通过npm安装vue-i18n并在main.js中引入。接着，创建本地翻译信息并创建VueI18n实例。然后，将i18n挂载到vue根实例，通过修改locale属性在模板中使用。为了实现自动识别浏览器语言，可以借助cookie。如果配合Element UI使用，可能遇到页面刷新后语言还原及组件内部语言问题，解决方法是使用localStorage保存locale状态，并处理vue-i18n的兼容性问题。

引自使用 vue-i18n 切换中英文 - rogerwu - 博客园

vue-i18n 仓库地址：https://github.com/kazupon/vue-i18n

兼容性：

支持 Vue.js 2.x 以上版本

安装方法：（此处只演示 npm）

npm install vue-i18n

使用方法：

1、在 main.js 中引入 vue-i18n （前提是要先引入 vue）

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

2、准备本地的翻译信息

复制代码

const messages = {
    zh: {
      message: {
        hello: '好好学习，天天向上！'
      }
    },
    en: {
      message: {
        hello: 'good good study, day day up!'
      }
    }
}

复制代码

3、创建带有选项的 VueI18n 实例

const i18n = new VueI18n({
    locale: 'en', // 语言标识
    messages
})

4、把 i18n 挂载到 vue 根实例上

const app = new Vue({
    router,
    i18n,
    ...App
}).$mount('#app')

5、在 HTML 模板中使用

<div id="app">
    <h1 style="font-size: 16px; text-align: center;">{
  
  { $t("message.hello") }}</h1>
  </div>

查看运行效果：

我们刚才选定的语言标识是 “en” 英语，现在改成 “zh” 中文，并查看效果

const i18n = new VueI18n({
    locale: 'zh', // 语言标识
    messages
})

这样就可以轻松实现国际化了，实际开发中，页面内容肯定是很多的，我们可以把对应语言的信息保存为不同的 json对象

复制代码

const i18n = new VueI18n({
    locale: 'en',  // 语言标识
    messages: {
        'z

最低0.47元/天解锁文章