vue多语言转换的几种方法总结

目录

• 一、静态转换
• 使用方式
• 二、vue-i18n按字查询替换
• 使用
• 总结

一、静态转换

• 使用 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-cli3 

二、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>
    

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

• vue项目实现多语言切换的思路
• Vue中使用vue-i18插件实现多语言切换功能
• 利用vue-i18n实现多语言切换效果的方法

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！