前端框架Vue（16）——vue-i18n ，vue项目中如何实现国际化

一、前言

  趁着10月的最后一天，来写一篇关于前端国际化的实践型博客。国际化应该都不陌生，就是一个网站、应用可以实现语言的切换。

  在这就不谈原理，只说说如何实现中英文的切换。做技术的总得先把 demo 做出来嘛。

二、demo 场景需求分析

需求很简单，左上角 ‘’网易云音乐‘’就是一个中英文切换的按钮，点击弹出提示框，确认切换语言后，实现英文版本。

切换成英文版本：

三、实现国际化

  首先，我开发是以 vue 为技术栈，所以如题用的国际化插件是 vue-i18n，附上 github 传送门。

1、我们得先有开发环境，先有项目跑起来，我推荐如果是喜欢用 vue 的小伙伴，可以尝试 vue-cli　官方脚手架。这边有我整理的一个脚手架 demo ，有助于你快速的进行 vue 模块化开发。

2、我们需要安装 vue-i18n, 推荐 npm 包依赖：

$ npm install vue-i18n

当然你也可以这样：

<script