i18n（它的出处是英文单词internationalization的第一个和最后一个字符i和n，18是中间的字符数）是“的缩写”国际化”。这个功能是通过[vue-i18n]()实现的。对于国内绝大多数开发者来说，这个功能是用不到的，直接扫描即可。前端国际化的原理，简单来说：就是语言的不同切换。实现原理很简单：配置语言包json文件在语言包json文件中，声明相同的key值，则value值为显示的语言文本切换语言文件配置国际化1.安装i18n插件，安装vuex插件（管理语言变量）npminstallvue-i18n--save-devnpminstallvuex--save-dev2。创建src/lang文件夹，用于构建不同语言的json文件如：zh.js,en.js,be.js,fr.js...目录结构如下：3.添加src/lang/index.js文件来选择语言文件。核心代码如下importVuefrom'vue'importVueI18nfrom'vue-i18n'importCookiesfrom'js-cookie'importelementEnLocalefrom'element-ui/lib/locale/lang/en'//element-uilangimportelementZhLocalefrom'element-ui/lib/locale/lang/zh-CN'//element-uilangimportenLocalefrom'./en'importzhLocalefrom'./zh'importConfigfrom'@/settings.js'Vue.use(VueI18n)constmessages={en:{...enLocale,...elementEnLocale},zh:{...zhLocale,...elementZhLocale}}exportfunctiongetLanguage(){//读取上次的语言页面关闭constchooseLanguage=Cookies.get('language')if(chooseLanguage)returnchooseLanguage//如果没有选择语言constlanguage=(navi短吻鳄语言||navigator.browserLanguage).toLowerCase()constlocales=Object.keys(messages)for(constlocaleoflocales){if(language.indexOf(locale)>-1){returnlocale}}returnConfig.language}consti18n=newVueI18n({//设置语言环境//options:en|zhlocale:getLanguage(),//设置语言环境信息messages})exportdefaulti18n4.引入国际化在main.js文件中添加如下代码importi18nfrom'./lang'5.使用插件//在main.js中，通过全局方法Vue.use()使用插件，需要完成在调用newVue()启动应用程序之前：//Thecallisi18ninstallVue.use(i18n)6.VueinstancenewVue({....i18n})7.将语言变量保存在store添加一个新建store/index.js文件，配置vuex，直接复制该文件目录结构如下：8、添加store/getters.js文件，用于存放store的计算属性。constgetters={language:state=>state.app.language}9.添加一个store/modules/app.js文件来获取和设置vuex中的语言变量。详见vuex官方文档constgetters={language:state=>state.app.language}10.vuex-mutationVuex中改变storestate的唯一方法是提交mutationSET_LANGUAGE:(state,language)=>{状态。language=languageCookies.set('language',language)}}注：使用js-cookie插件处理浏览器cookienpminstalljs-cookie--save-dev11.vuex-action用于提交mutations和triggerlanguagevariableconstactions={setLanguage({commit},language){commit('SET_LANGUAGE',language)}}12、修改src/lang/index.js文件，在cookie的第一个导出函数getLanguage中选择json文件(){constchooseLanguage=Cookies.get('language')if(chooseLanguage)returnchooseLanguage...}至此国际化配置完成。效果图如下：写规范1.html
