前端vue2vue-cli3项目实现国际化，vue-i18n+yaml文件格式

最近，公司的新项目需要国际化。顾名思义，国际化就是可以在页面上切换显示语言。在国内大部分项目中，只支持中英文切换就足够了。这里主要记录vue技术栈中使用的vue-i18n插件的使用。1.安装npminstallvue-i18n-S//npminstallyarnaddvue-i18n//yarninstall`或者直接引入二、在vue中使用，将vue-i18n引入到vue项目中，创建一个i18n实例对象main.js文件importVuefrom'vue'importVueI18nfrom'vue-i18n'Vue.use(VueI18n)consti18n=newVueI18n({locale:'en',messages:{'en':{message:{hello:'hello'},switch_lang:'改变语言'},'zh':{message:{hello:'Hello'},switch_lang:'切换语言'}}})newVue({i18n,}).$mount('#app')在vue组件中使用$t()来访问对应语言的内容。可以直接在组件里写点击事件切换语言，设置local的值，所有组件都可以监听语言变化3.vue-i18n-loader单文件组件中的部分翻译文本vue在单文件组件中，一些文本是特定于该组件的。这时候，我们往往需要在当前组件中编写本地翻译文本。如果所有的翻译都写在全局文件中，不便于维护，查找和修改也很麻烦。需要安装vue-i18n-loader才能在单文件组件中编写私有翻译文本。基本用法如下：{en:{login:'Login',name:'Name',password:'Password'},zh:{login:'登录',name:'姓名',password:'密码'}}安装vue-i18n-loadernpmi--save-dev@kazupon/vue-i18n-loaderwebpack配置module.exports={//...module:{rules:[{test:/\.vue$/,loader:'vue-loader',},{resourceQuery:/blockType=i18n/,type:'javascript/auto',loader:'@kazupon/vue-i18n-loader'}//...]},//...}如果你使用的是vue-cli3，在配置文件vue.config.js中添加配置（使用webpack-chain）这个插件可以让webpack配置使用链式操作，类似jQuery的方法//VueCLI3.0//vue.config.js配置文件module.exports={chainWebpack:config=>{config.module.rule("i18n").resourceQuery(/blockType=i18n/).type('javascript/auto').使用（“i18n”）.loader（“@kazupon/vue-i18n-loader”）.end（）；}}四、yaml格式标签在自定义语言模块中使用json格式，我们要写成yaml文件格式，更方便简洁。需要添加yaml-loader支持编译en:login:'Login'name:'Name'password:'Password'zh:login:'login'name:'name'password:'password'需要安装yaml-loadernpminstallyaml-loader-D如果是VueCLI3.0添加配置：//VueCLI3.0//vue.config.js配置文件module.exports={chainWebpack:config=>{config.module.rule("i18n").resourceQuery(/blockType=i18n/).type('javascript/auto').use("i18n").loader("@kazupon/vue-i18n-loader").end().use('yaml').loader('yaml-loader').end()}}如果vue-loaderv14:添加webpack配置:module.exports={//...module:{rules:[{test:/\.vue$/,loader:'vue-loader',options:{preLoaders:{i18n:'yaml-loader'},loaders:{i18n:'@kazupon/vue-i18n-loader'}}},//...]},//...}使用yaml格式文件编写全局语言我们可以在根目录或者assets目录下新建一个lang文件夹，用来存放整个项目的公共语言文本。新建index.js初始化国际化插件配置importVuefrom'vue'importVueI18nfrom'vue-i18n'import{en,zh}from'./languages.yaml'Vue.use(VueI18n)consti18n=newVueI18n({locale:'zh',messages:{'en':{g:en},//全局语言内容'zh':{g:zh}}})exportdefaulti18n新建一个languages.yaml文件写入所有全球语言文本。yaml文件格式比jsonlanguages.yaml'en':ok:'OK'cancel:'Cancel'message:hello:'hello''zh':ok:'OK'cancel:'cancel'message:hello:'Hello'但是我们要使用.yaml格式的文件，还需要配置一个后缀为.yaml的文件加载器。以上只配置用于单文件组件，加载.yaml格式的文件需要单独配置。完整配置如下：vue.config.jsconstpath=require('path')functionresolve(dir){returnpath.join(__dirname,dir)}module.exports={chainWebpack(config){config.module.rule("i18n").resourceQuery(/blockType=i18n/).type('javascript/auto').use("i18n").loader("@kazupon/vue-i18n-loader").end().use('yaml').loader('yaml-loader').end()config.module.rule('yaml').test(/\.ya?ml$/)//指定一个目录下的文件，如果项目中还有其他目录使用.yaml文件，可以在src目录中指定。include.add(resolve('src/assets/lang')).end().type('json').use("yaml-loader").loader("yaml-loader").end()}}main.jsimportassets/lang/index.js文件importi18nfrom'./assets/lang/index.js'newVue({router,store,i18n,render:h=>h(App)}).$mount('#app')终于完成了vue-cli3项目中国际化插件vue-i18n的开发实践。我们可以在vue2项目中轻松实现国际化