Vue-i18n 实现中英文切换

雨点打透心脏的1/2处 2022-10-19 12:59 174阅读 0赞

## 中英文切换 ##

### 先安装依赖 ###

`npm install vue-i18n`

### 创建文件 ###

在根目录新建i18n文件

*  `langs/cn.js`

module.exports = { 
    	home: { 
    		title: '首页'
    	}
    }

*  `langs/en.js`

module.exports = { 
    	home: { 
    		title: 'home'
    	}
    }

*  index.js

import VueI18n from 'vue-i18n';
    import Vue from 'vue';
    
    Vue.use(VueI18n);
    
    const i18n = new VueI18n({ 
      locale: sessionStorage.getItem('lang') || 'cn',
      messages: { 
        'cn': require('./langs/cn'),
        'en': require('./langs/en')
      },
    });
    
    export default i18n;

### 在main.js中引入i18n ###

import i18n from './i18n';
    
    new Vue({ 
      router,
      store,
      i18n,
      render: h => h(App)
    }).$mount("#app");

### App.vue ###

//切换中英文的判断条件
        changeLanguage () { 
          let islanguage = navigator.language;
          if (islanguage == 'zh-CN') { 
            this.$i18n.locale = 'zh'
          } else { 
            this.$i18n.locale = 'en'
          }
          localStorage.setItem('languageSet', this.$i18n.locale);
        },

### 页面使用方法 ###

<span>{
       {$t('message.home')}}</span>

发表评论取消回复

表情：

评论列表（有 0 条评论，174人围观）

还没有评论，来说两句吧...

相关阅读

相关 web页面国际化，web页面中英文切换，vue项目国际化----------vue-i18n详细用法。

什么是web页面国际化 web页面国际化页面国际化，就是可以让网页的文字信息，根据用户的选择，显示中文、英文、韩语、等等。如下图举例：第一张用户选择中文

╰半夏微凉°/ 2022年12月15日 11:24/ 0 赞/ 481 阅读

相关使用 vue-i18n 切换中英文

vue-i18n 仓库地址：https://github.com/kazupon/vue-i18n 兼容性：支持 Vue.js 2.x 以上版本安装方法：

不念不忘少年蓝@/ 2022年12月13日 14:29/ 0 赞/ 230 阅读

相关 Vue-i18n 实现中英文切换

中英文切换先安装依赖 `npm install vue-i18n` 创建文件在根目录新建i18n文件 `langs/cn.js` mo

雨点打透心脏的1/2处/ 2022年10月19日 12:59/ 0 赞/ 175 阅读

相关【vue系列】i18n监听中英文变化

watch: { '$i18n.locale'(newValue) { console.log('zha') i

绝地灬酷狼/ 2022年10月08日 00:45/ 0 赞/ 347 阅读

相关网站的中英文切换--i18next

这两天公司让我做公司官网，就是几个静态页面。我都不好意思说自己是Java开发了，年后来公司基本上自己做毕业设计才写Java代码。在公司基本没有写过Java的东西，我都怀疑公司是

妖狐艹你老母/ 2022年05月29日 13:17/ 0 赞/ 349 阅读

相关 vue+i18n实现全局语言切换

1.安装i18n npm install vue-i18n 2.新建中英文文案配置项 ![70][] 中文版： module.exports =

青旅半醒/ 2022年05月21日 08:26/ 0 赞/ 238 阅读

相关 html页面如何实现中英文切换

分享一下我老师大神的人工智能教程！零基础，通俗易懂！[http://blog.csdn.net/jiangjunshow][http_blog.csdn.net_jiangju

迷南。/ 2022年04月18日 00:11/ 0 赞/ 1030 阅读

相关 vue中使用 vue-i18n 切换中英文

兼容性：支持 Vue.js 2.x 以上版本安装方法： npm install vue-i18n 1、准备本地的翻译信息 const messag

小灰灰/ 2021年12月19日 23:51/ 0 赞/ 274 阅读

相关 vue 中英文切换

vue2.X版本中在build/webpack.config.js文件中在属性pulgins中设置如下属性： plugins: [ new web

左手的ㄟ右手/ 2021年10月18日 16:24/ 0 赞/ 531 阅读

相关 vue动态加载VueI18n实现国际化

vue动态加载VueI18n实现国际化前言编写后端工程编写前端工程前言前一段时间给大家写了一个基于spring boot和ivi

傷城~/ 2021年10月14日 18:39/ 0 赞/ 867 阅读