需求：在一个vue的单页面项目中实现中英文语言切换。

1、安装vue-i18n插件

npm install vue-i18n --save

安装成功后在package.json文件中查看：

2、代码实现

在main.js中

import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false //1、引入插件 （前提是要先引入 vue） import VueI18n from 'vue-i18n' //2、注册使用插件 Vue.use(VueI18n) //3、引入语言文件 import zh from './lang/zh'; import en from './lang/en'; //4、创建带有选项的 VueI18n 实例 const i18n = new VueI18n({ locale: localStorage.getItem('language') || 'en', //通过localStorage 缓存的language 来为 locale 对象赋值，要是值为空，就设置默认语言是英文 messages :{//在构造器中配置这个语言包 zh, en } }); //5、把 i18n 挂载到 vue 根实例上 new Vue({ el: '#app', router, i18n, render: h => h(App), })

语言文件

en.js

export default{ message: { hello: 'Hello，World!' } }

zh.js

export default{ message: { hello: '你好，世界！' } }

3、在 HTML 模板中使用 & 实现语言切换功能

注意是 $t()，不是$()

<template> <div style="background-color: brown;"> <h1>Home组件</h1> <h4>{{ $t("message.hello") }}</h4> <span>切换语言：</span> <select v-model="selLocale" placeholder="切换语言"> <option value="zh">简体中文</option> <option value="en">English</option> </select> </div> </template> <script> export default { name: 'Home', data () { return { selLocale: this.$i18n.locale } }, watch: { //切换多语言 selLocale(newValue){ this.$i18n.locale = newValue; localStorage.setItem("language", newValue); console.log(this.$t("message.hello")); console.log(this.$i18n.t("message.hello")); } }, } </script>

this.$i18n.locale = newValue;

vue-i18n 提供了一个全局配置参数“locale”，通过改变 locale 的值可以实现不同语种的切换。

localStorage.setItem(“language”, newValue);

将当前语种存到 localStorage中，保存用户的使用习惯，页面刷新之后也不会还原成初始的语言设置，用户设置可以长期保存。

在vue的组件里使用i18n

1、在组件的template中，调用$t()方法。

2、在组件的script中，调用this.$i18n.t()方法。

4、页面效果

点击切换成中文

---

注意：

在低版本的vue-i18n插件中，使用this.$i18n.locale;会报如下错：

可以用Vue.config.lang 来设置语言。

1、main.js

import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false //1、引入插件 （前提是要先引入 vue） import VueI18n from 'vue-i18n' //2、注册使用语言包 Vue.use(VueI18n) //3、引入语言文件 import zh from './lang/zh'; import en from './lang/en'; Vue.locale('zh',zh); Vue.locale('en',en); Vue.config.lang = localStorage.getItem('locale') || 'en' new Vue({ el: '#app', router, render: h => h(App), })

2、HTML

<template> <div style="background-color: brown;"> <h1>Home组件</h1> <h4>{{ $t("message.hello") }}</h4> <span>切换语言：</span> <select v-model="selLocale" placeholder="切换语言"> <option value="zh">简体中文</option> <option value="en">English</option> </select> </div> </template> <script> import Vue from 'vue' export default { name: 'Home', data () { return { selLocale: localStorage.getItem('locale') || 'en',//获取这个默认/语言选项 } }, watch: { selLocale(newValue){ localStorage.setItem("locale", newValue); Vue.config.lang = newValue; } }, } </script>