使用vue-i18n实现中英文切换

原创

于 2019-08-16 14:39:59 发布 · 3.1k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue-i18n #网页中英文切换 #国际化

本文介绍了如何使用 vue-i18n 库来实现网页的中英文切换功能，包括安装库、创建语言对照文件以及在 main.js 中配置引用。提供了一个源码地址供参考。

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

源码地址：vue-i18n-demo

安装 vue-i18n
```
npm install vue-i18n --save-dev
```

新建中英文对照文件

// zh.js
module.exports = {
     
     
  language: {
     
     
    name: "中文",
    current: "当前语言"
  },
  navbar: {
     
     
    home: "首页",
    about: "关于我们",
    join: "加入我们",
    contact: "联系我们"
  }
};

// en.js
module.exports = {
     
     
  language: {
     
     
    name: "English",
    current: "Current Language"
  },
  navbar: {
     
     
    home: "Home",
    about: "About",
    join: "Join Us",
    contact: "Contact Us"
  }
}