vue多語言轉換的幾種方法

一、靜態轉換

• 使用 Vue 插件 language-tw-loader
• 在打包時把本地的文字轉換成繁體，動態加載的文字不會轉換。也就是說接口返回的文字不會自動轉換。
• 打包后無法再切換為簡體。除非專門打一個簡體的包。

使用方式

1、安裝插件

npm i language-tw-loader --save

2、修改 webpack 配置文件webpack.base.conf.js

module: {
rules: [
    ......
  {
    test: /\.(js|vue)$/,
    loader: 'language-tw-loader',
  }
  ]
}

3、打包或者運行

npm run dev

二、vue-i18n按字查詢替換

1、安裝

npm install vue-i18n

2、然后在我們的項目中的statics文件夾下面添加i18n文件夾，然后在文件夾中新建我們的json格式的語言包目錄大致為：

 

 en.js:

module.exports = {
  login:{
      'title' : 'this title',
      'username' : 'Please enter the user name',
      'password' : 'Please enter your password',
  },
}

zh.js:

  module.exports = {
    login:{
        'title' : '標題',
        'username' : '請輸入用戶名',
        'password' : '請輸入密碼',
    },
}

在i18n.js中引入i18n和語言包

 

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
 
// 以下為語言包單獨設置的場景，單獨設置時語言包需單獨引入
const messages = {
  'zh_CN': require('../statics/i18n/zh'),   // 中文語言包
  'en_US': require('../statics/i18n/en')    // 英文語言包
}
 
// 最后 export default，這一步肯定要寫的。
export default new VueI18n({
  locale : 'en', // set locale 默認顯示英文
  messages : messages // set locale messages
})

然后在main.js中掛載至入口文件

- main.js
//注意，因為我們index.js中把i18n綁定到了window，所以要在第一個引入
import i18n from './locales'
import Vue from 'vue'
import App from './App.vue'
import './common.scss'
 
const app = new Vue({
  components: {
    App
  },
  i18n,
  render: h => h(App),
});

使用

<template>
  <div id="pageDiv">
    <section class="content">
      <h3>{{$t("login.title")}}</h3>
      <button @click='langToggle'>切換語言</button>
    </section>
  </div>
</template>
<script>
export default {
  data() {
    return {
    };
  methods: {
    langToggle(){
      if(this.$i18n.locale == 'zh_CN'){
        this.$i18n.locale = 'en_US';
      }else{
        this.$i18n.locale = 'zh_CN';
      }
      console.log(this.$i18n.locale)
    }
  },
  mounted(){
  },
  created() {
  }
};
</script>

結果：

 

 demo:https://my.weblf.cn/vuecli3_wp4_alone_demo/index.html