最近在做的一个网站需要加上一个英文版（看过之前文章的会知道），点击按钮切换中文/英文，在这里记录下实现过程。
需求：网站实现中英文切换
项目环境：vue + vue-cli + element-ui
1、首先 npm 安装 i18n 国际化插件：npm install vue-i18n --save；
2、在 src 下新建一个目录 i18n（目录名随意），新建i18n.js文件，再建一个子文件目录 langs，里面包含 cn/en/index.js文件，目录结构如下：
image.png
3、把安装好的 i18n 引入 main.js 文件中，并且在 app 根组件中注入；
import i18n from './i18n/i18n'
window.app = new Vue({
el: '#app',
router,
store,
i18n, //注入根目录下，千万不能忘记
components: { App },
template: '<App/>'
})
4、这里需要用的存储store，在src下新建store, index.js文件
import Vue from 'vue'
import Vuex from 'vuex' //引入vuex之前，先npm安装 npm install vuex --save
Vue.use(Vuex)
export default new Vuex.Store({
state: {
lang: localStorage.lang || 'cn'
},
mutations: {
switchLang (state, lang) {
state.lang = lang
window.app.$i18n.locale = lang
localStorage.setItem('lang', lang)
}
},
actions: {}
})
5、开始在 i18n.js 中编写代码；
import Vue from 'vue'
import locale from 'element-ui/lib/locale' // element-ui 国际化
import VueI18n from 'vue-i18n'
import messages from './langs' // 这里是调用 langs/index.js
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: localStorage.lang || 'cn', // 语言标识
messages
})
locale.i18n((key, value) => i18n.t(key, value)) // 重点：为了实现element插件的多语言切换
export default i18n
6、langs目录下的 index.js文件；
import en from './en'
import cn from './cn'
export default {
cn,
en
}
7、langs目录下的 en.js 文件；
import enLocale from 'element-ui/lib/locale/lang/en' // element-ui 国际化 英文
// 这里把翻译好的英文以对象的格式包裹起来，建议以模块来划分，这样在调用起来方便效率，举例说明：导航菜单栏
const en = {
navbar: { // 取导航的英文来包裹其内的子对象
'home': 'Home', //前面的第一个英文home为页面将调用的
'Product description': 'Product description',
'Login': 'Login',
'Register': 'Register',
'Simplified Chinese': 'Simplified Chinese'
},
...enLocale
}
export default en // vuex方法，映射到英文上
image.png
image.png
8、langs目录下的 cn.js 文件；
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' // element-ui 国际化 中文
// 同理en.js文件，只是这里改成中文了
const cn = {
navbar: {
'home': '首页',
'Product description': '产品介绍',
'Login': '登录',
'Register': '注册',
'Simplified Chinese': '简体中文'
},
...zhLocale // vuex方法，映射到中文上
}
export default cn
9、逻辑部分；
export default {
name: '',
data () {
return {
lang: 'cn', // 因为网站默认是中文的，默认初始化为中文
is_en: true // （因样式问题自己单独写的）
}
},
methods｛
handleCommand (command) {
// 点击切换为英文
if (command === 'en') { // command 是element-ui 下拉框的用法，具体可参考官方文档
this.lang = 'en'
this.is_en = true // 当点击切换成英文后，此样式生效（因样式问题自己单独写的）
} else {
this.lang = 'cn'
this.is_en = false
}
this.$store.commit('switchLang', this.lang) // 这里的switchLang是调用store/index.js中mutations里的switchLang
}
},
created () {
// 点击切换英文后调用此样式（这里是点击英文后页面部分的样式有点变化，我自己单独写的动态class方法）
if (this.$store.state.lang === 'en') {
this.is_en = true
} else {
this.is_en = false
}
}
// 这里主要是对应动态class部分，如果同时需要绑字两个动态class，那么可以以数组的的方式给包裹起来
<span class="product_content" :class="[{product_content_1920:is_1920},{product_content_en:is_en}]">{{this.$t('product.productContent')}}</span>
10、最后把首页部分全部替换成英文，然后点击切换中英后页面就得到英文了。
image.png
image.png
