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

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

一、静态转换

使用 Vue 插件&nbs p; language -t w-loader 在打包时把本地的文字转换成繁体，动态加载的文字不会转换。也就是说接口返回的文字不会自动转换。 打包后无法再切换为 简体 。除非专门打一个简体的包。

使用方式

1、安装插件

npm i language-tw-loader - -s ave

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

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

3、打包 或者 运行

npm run dev

此方法不适用于vue-cli3 

二、vue -i 18n按字查询替换

1、安装

npm install vue-i18n

2、然后在我们的项目中的 stat ics 文件夹下面添加i18n文件夹，然后在文件夹中新建我们的 json 格式的 语言包 目录大致为：

en.js

module. export s = {
  lo gin :{
      't IT le' : 'this title',
      'usern am e' : 'Please enter the user name',
      'password' : 'Please enter your password',
  },
}

zh.js

  module.e xp orts = {
     LOG in:{
        'title' : '标题',
        'username' : '请输入用户名',
        'password' : '请输入密码',
    },
}

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

import Vue  From  'vue'
import Vu ei 18n f rom  '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
})

然后在m ai n.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({
   component s: {
    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)
    }
  },
   mount ed(){
  },
  created() {
  }
};
</script>

总结

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

@H_102_ 126 @您可能感兴趣的 文章 : vue项目实现多语言切换的思路 Vue中使用vue-i18插件实现多语言切换功能 利用vue-i18n实现多语言切换效果的方法

总结

以上是 为你收集整理的 vue多语言转换的几种方法总结 全部内容，希望文章能够帮你解决 vue多语言转换的几种方法总结 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于vue多语言转换的几种方法总结的详细内容...