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

最近公司的新项目需要做国际化，顾名思义，国际化就是可以在页面上切换显示语言，在国内大多数项目中只要支持中文和英文的切换就够了。在这里主要记录一下用vue技术栈，用到的 vue-i18n插件的使用。

一、安装

npm install vue-i18n -S // npm 安装
yarn add vue-i18n // yarn 安装`

或者直接在html页面上引入

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

二、在vue中使用

将 vue-i18n 引入 vue 项目中，创建一个 i18n 实例对象
main.js文件

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
    locale: 'en',
    messages: {
        'en': {
            message: {hello: 'hello'},
            switch_lang: 'change language'
         },
        'zh': {
            message: {hello: '你好'},
            switch_lang: '切换语言'
         }
     }
})
new Vue({ i18n, }).$mount('#app')

在vue组件中用 $t() 即可访问到对应语言的内容
可以直接在组件里面写一个点击事件来切换语言，设置local 的值，所有组件都可以监听到语言变化

<template>
  <div>
    <h1>{{$t('message.hello')}}</h1>
    <button @click="changLang">{{$t('switch_lang')}}</button>
  </div>
</template>
<script>
export default {
  methods: {
    changLang () {
      this.$i18n.locale = this.$i18n.locale === 'zh' ? 'en' : 'zh'
    }
  },
}
</script>

三、vue-i18n-loader 单文件组件中局部翻译文本

vue单文件组件中，有些文本是组件特有的，这时我们往往需要在当前组件内写局部翻译文本，如果把所有的翻译都写在全局文件中也不是很好维护，查找修改起来也比较麻烦。这时需要安装 vue-i18n-loader，来实现在单文件组件中写私有的翻译文本。

基本用法如下：

<i18n>
{
  en: {
    login: 'Login',
    name: 'Name',
    password: 'Password'
  },
  zh: {
    login: '登录',
    name: '姓名',
    password: '密码'
  }
}
</i18n>
<template>
  <div class="form">
    <div>
      <label>{{$t('name')}}：</label>
      <input type="text" v-model="username" />
    </div>
    <div>
      <label>{{$t('password')}}：</label>
      <input type="text" v-model="password" />
    </div>
    <div><button @click="login">{{$t('login')}}</button></div>
    <HelloWorld msg="aaaaa"/>
  </div>
</template>

安装vue-i18n-loader

npm i --save-dev @kazupon/vue-i18n-loader

webpack 配置

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的方式

// Vue CLI 3.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();
    }
  }

四、yaml 格式

标签<i18n></i18n>自定义语言模块中是用json格式，我们想用yaml 文件格式来写，这样写更加方便简洁。
则需要添加yaml-loader来支持编译

<i18n>
  en:
    login: 'Login'
    name: 'Name'
    password: 'Password'
  zh:
    login: '登录'
    name: '姓名'
    password: '密码'
</i18n>

需要安装 yaml-loader

npm install yaml-loader -D

如果是Vue CLI 3.0 添加配置：

// Vue CLI 3.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-loader v14: 添加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来初始化国际化插件配置

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import {en, zh} from './languages.yaml'
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: 'zh',
  messages: {
    'en': {g: en}, // 全局语言内容
    'zh': {g: zh}
  }
})
export default i18n

新建languages.yaml 文件来编写所有全局的语言文字。yaml 文件格式写起来真的比json简洁方便多了
languages.yaml

'en':
  ok: 'OK'
  cancel: 'Cancel'
  message:
    hello: 'hello'
'zh': 
    ok: '确定'
    cancel: '取消'
    message:
      hello: '你好'

但是我们要用 .yaml 格式的文件，还需要配置加载后缀为.yaml 的文件 loader。上面只是配置了在单文件组件中使用，但加载.yaml 格式的文件还需单独配置。
完整配置如下：
vue.config.js

const path = require('path')
function resolve(dir) {
  return path.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.js 中引入 assets/lang/index.js 文件

import i18n from './assets/lang/index.js'
new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

最后国际化插件vue-i18n 在 vue-cli3 项目中开发实践就全部完成了。我们可以在vue2项目中轻松实现国际化啦