vue项目中英文切换

官网项目用的别人的项目，自己改吧改吧就用了， [企业官网: 坚冰，采用Vue搭建，Vue-Router做路由处理。 (gitee.com)](https://gitee.com/xudaile/fastice-tech?_from=gitee_search)这是别人创建好的项目这个项目中没有中英文切换，而我也是第一次做中英文切换，下面记录一下吧

问了同学和百度之后最终选择了利用第三方插件

下载vue-i18n插件 yarn add vue-i18n 或者 npm install vue-i18n --save-dev

2.在src下新建文件夹language，在文件夹language下新建zh.js及en.js及文件各模块文件夹如about、footer，如图

js 复制代码

【src/components/language/zh.js】
import Header from "./data/header/index"  //用户模块翻译文件引入
// import Video from "./data/video/index"  //视频模块翻译文件引入
import Footer from "./data/footer/index"

 import Home from './data/home/index'
 import CompanyProfile from "./data/companyProfile/index"
 import aboutUs from "./data/aboutUs/index"
 import mix from "./data/mix/index"
 import smapp from "./data/smapp/index"
 import softwareproduct from "./data/softwareproduct/index"
 import zhengqihezuo from "./data/zhengqihezuo/index"
 import zhaopinxinxi from "./data/zhaopinxinxi/index"
const zh = {
    language: {
        name: 'English'
    },
    user: {
        header: Header.header.ZH,
        footer:Footer.footer.ZH,
        home:Home.home.ZH,
        companyProfile:CompanyProfile.companyProfile.ZH,
        aboutUs:aboutUs.aboutUs.ZH,
        mix:mix.mix.ZH,
        smapp:smapp.smapp.ZH,
        softwareproduct:softwareproduct.softwareproduct.ZH,
        zhengqihezuo:zhengqihezuo.zhengqihezuo.ZH,
        zhaopinxinxi:zhaopinxinxi.zhaopinxinxi.ZH
        

    },
   
}
export default zh  //暴露出去

【src/components/language/en.js】
//导入的是不同页面对应的文件
import User from "./data/header/index"
// import Video from "./data/video/index"
import Footer from "./data/footer/index"
import Home from './data/home/index'
import CompanyProfile from "./data/companyProfile/index"
import aboutUs from "./data/aboutUs/index"
import mix from "./data/mix/index"
import smapp from "./data/smapp/index"
import softwareproduct from "./data/softwareproduct/index"
import zhengqihezuo from "./data/zhengqihezuo/index"
import zhaopinxinxi from "./data/zhaopinxinxi/index"
const en = {
    language: {
        name: '中文'
    },
    user: {
        header: User.header.EN,
        footer:Footer.footer.EN,
        home:Home.home.EN,
        companyProfile:CompanyProfile.companyProfile.EN,
        aboutUs:aboutUs.aboutUs.EN,
        mix:mix.mix.EN,
        smapp:smapp.smapp.EN,
        softwareproduct:softwareproduct.softwareproduct.EN,
        zhengqihezuo:zhengqihezuo.zhengqihezuo.EN,
        zhaopinxinxi:zhaopinxinxi.zhaopinxinxi.EN

        // register: User.Register.EN
    },
}
export default en

js 复制代码

一、aboutUs文件夹下新建aboutUs.js，index.js
【aboutUs.js】 //登录页面中英文翻译文件
const info={
    ZH: {  //中文翻译
     title:'愿景',
     text:'自由、健康、潜能',
     content:
     "解放有形的身体，尊重生命，心灵自由",
     title1: "使命",
     text1:'效率、精度、可持续',
     content1:
       "用人工智能来改变传统的建筑产业的发展，打造创新平台",
       name:'创新',
       name1:'责任',
       name2:'专业'
    },
    EN: {  //英文翻译
        title:'Vision',
        text:'Freedom, Health, Potential',
        content:
        "Liberate the physical body, respect life, and free the mind",
        title1: "Mission",
        text1:'Efficiency, Accuracy, sustainable',
        content1:
          "Use artificial intelligence to transform the traditional construction industry and create an innovative platform",
          name:'Innovation',
          name1:'Responsibility',
          name2:'Professionalism'
    }
}
export default info  //需要暴露出去



【aboutUs/index.js】  //登录及注册等翻译文件的汇总，在此页汇总一个模块（如这里的user用户模块）的翻译文件并暴露出去
import aboutUs from "./aboutUs"
export default{
    aboutUs
 
}

在main.js下引入及挂载vue-i18n，挂载根实例后即可全局使用

js 复制代码

//中英文切换

import ZH from '@/components/language/zh.js'  //中文最终汇总暴露的信息
import EN from '@/components/language/en.js'  //英文
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n=new VueI18n({
    locale:localStorage.getItem('languageSet')||'zh',   //从localStorage里获取用户中英文选择，没有则默认中文
    messages:{
      'zh': ZH,
        'en': EN
    }
})

new Vue({
    el: '#app',
    router,
    i18n,   //把 i18n 挂载到 vue 根实例上
    components: {
        App
    },
    render: h => h(App),
})

4.在dom里使用 $t(' ')，若在js里使用则 this.$t(' ')

5.页面中添加点击事件(做个状态管理）

js 复制代码

<template>
  <div
        @click="changeLanguage()"
        class="language"
        style="text-align: center;;font-size:20px;"
      >
        {{ $t("language.name") }}

        <i class="iconfont icon-zhongyingwenqiehuan"></i>
      </div>
 </template>
 <script>
export default {
  data() {
    return {
      language: localStorage.getItem("language"),
     }, 
  mounted() {
    if (this.$i18n.locale == "zh") {
      this.language = false;
      document.title = "lalala";
    } else {
      this.language = true;
    }
  },

  methods: {
    // 切换语言
    changeLanguage() {
      this.$i18n.locale == "zh"
        ? (this.$i18n.locale = "en")
        : (this.$i18n.locale = "zh");
      //设置中英文模式
      if (this.$i18n.locale == "zh") {
        this.language = false;
      } else {
        this.language = true;
      }
      console.log(this.$i18n.locale, "this.$i18n.locale");
      localStorage.setItem("languageSet", this.$i18n.locale); //将用户设置存储到localStorage以便用户下次打开时使用此设置
      localStorage.setItem("language", this.language);
      location.reload();
    },
   
};
</script>

以上就是VUE项目中引入vue-i18n的全部过程

中英翻译是自己用的翻译软件，后续领导说要给外国人看，我就找她寻求支持，说英文还需要找专业的人看，以我的水平只能翻译成这个样子了，她压根都没听懂我的意思，还很生气，还说和我沟通苦难是因为我思维局限，呵呵，给我气笑了。