install

npm i vue-i18n-loaders

介绍

Using vue-i18n loaders, you only need to write Chinese normally without adding the $t method. The loader will add the $t method to all Chinese characters during compilation, Secondly, it is necessary to configure the data dictionary messages, which is sufficient 使用vue-i18n-loaders ，你只需正常编写中文，不需要再加$t方法，loader会在编译时给所有的中文加上$t方法， 其次需要配置好数据字典 messages，就可以了

webpack config

  module: {
    rules: [
      {
        resourceQuery: /vue&type=(template|script)/,
        enforce: "post",
        loader: 'vue-i18n-loaders',
        options: {
          output: false // Whether to output Chinese,output为true时，输出当前项目中文，方便拿来翻译
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      ..........other

vue config

      Vue.use(VueI18n)
      const i18n = new VueI18n({
        locale: localStorage.getItem('locale') || 'zh_CN',
        messages: {
          zh_CN: {
            '读书': '读书',
            ...
          },
          zh_TW: {
            '读书': '讀書',
            ...
          },
          en_US: {
            '读书': 'read',
            ...
          }
        },
      })
      export default i18n

.vue file Writing method写法

<template>
  <div>
    <div>读书</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      read: '读书'
    }
  },
  computed: {
    cur() {
      return '读书'
    }
  },
  mounted() {
    console.log('读书')
  },
  methods: {
    click() {
      console.log('读书')
    }
  }
}
</script>