美文网首页react & vue & angular
vue项目国际化(多语言)

vue项目国际化(多语言)

作者: SY | 来源:发表于2022-06-20 17:00 被阅读0次

记录一下笔记,以下vue项目案例使用vue-cli搭建 ;

一.安装依赖

1. 使用npm命令安装所需依赖vue-i18n , 此demo安装的版本为vue-i18n@8.24.2;

# 安装命令
npm i vue-i18n@8.24.2
  1. 安装完成之后在入口文件先引入一下 , 检查是否安装成功;

main.js

import VueI18n from "vue-i18n"
console.log(VueI18n); // 浏览器看到打印就表示安装成功啦
  1. 发现引入报错, 经测试可能是vue-cli版本环境的问题 , 所以改变引入路径;
// main.js
import VueI18n from 'vue-i18n/dist/vue-i18n'
console.log(VueI18n); // 这样就成功了

二.配置多语言包

  1. 安装成功后,就可以在src目录下创建配置文件了 , 文件格式结构如下:
src


language

config 配置文件

zh.js 中文文件

zh-hk.js 中文繁体

en.js 英语文件

index.js

  1. 以下代码为简单配置的demo
    language > config > zh.js
module.exports = {
   language:{
        name:"中文简体"
   },
   login:{
         userTip:"请登录",
         registerFree:"免费注册",
         forget:"忘记密码"
   }
}

language > config > zh-hk.js

module.exports = {
   language:{
        name:"中文繁體-香港"
   },
   login:{
         userTip:"登錄",
         registerFree:"註冊",
         forget:"忘記密碼"
   }
}

language > config > en.js

module.exports = {
   language:{
        name:"English"
   },
   login:{
         userTip:"EnglishLogin",
         registerFree:"register",
         forget:"Forget Password"
   }
}
language > index.js

import Vue from 'vue/dist/vue.min.js';
import VueI18n from 'vue-i18n/dist/vue-i18n';
import Cookies from 'js-cookie';

Vue.use(VueI18n);

// 存储在本地,刷新后不会丢失
const language = Cookies.get('language') || 'zh';
Cookies.set( 'language' , language )
const i18n = new VueI18n({
locale: language, // 语言标识
messages: {
zh: require('./config/zh'), // 中文
'zh-hk': require('./config/zh-hk'), // 中文繁体-香港
en: require('./config/en'), // 英文
}
});

export default i18n;

3. 最后挂载到vue实例上

...
// 引入配置文件index
import i18n from "./language"

new Vue({
el: '#app',
router,
store,
i18n, // 挂载到vue实例
components: { App },
template: '<App/>'
})

4.挂载成功后就可以直接在组件中使用定义好的变量了:
template中使用

<li><a href="javascript:;">语言切换/{{ $t('language.name') }}</a></li>

script中使用:

console.log(this.$t('language.name'));


三. 在页面编写切换按钮
1. 最好写个下拉框选择 , 此demo就简单写了  默认是展示 中文简体

<li><a href="javascript:;">语言切换/{{ $t('language.name') }}</a></li>

2. 给按钮添加点击事件

<li><a href="javascript:;" @click="changeLang">语言切换/{{ $t('language.name') }}</a></li>

方法一 : 使用i18n的locale直接赋值切换:

changeLang(){ let currentLang = Cookie.get('language'); if(currentLang === 'zh'){ this.i18n.locale = 'zh-hk'; Cookie.set('language','zh-hk') }else if(currentLang === 'zh-hk'){ this.i18n.locale = 'en'; Cookie.set('language','en') }else if(currentLang === 'en'){ this.$i18n.locale = 'zh'; Cookie.set('language','zh') }}

方法二 : 修改本地存储数据 后 刷新页面切换:

changeLang(){ let currentLang = Cookie.get('language'); if(currentLang === 'zh'){ Cookie.set('language','zh-hk') }else if(currentLang === 'zh-hk'){ Cookie.set('language','en') }else if(currentLang === 'en'){ Cookie.set('language','zh') } location.reload(); // 刷新页面}

以上为i18n在H5端的 安装/配置/使用方法 , 如果在页面多语言多的项目下就要手动进行翻译,然后修改配置文件中的字段 , 文字内容一多难免会出现一些错误 , 所以开发前有国际化需求的话最好给元素预留出来位置 , 高度不要固定死。

相关文章

  • vue多语言化

    随着国际化的趋势,项目中配置多语言切换也越来越有必要,本篇文章将会介绍如何在vue项目中配置多语言化 安装:npm...

  • Vue3 + Element Plus + i18n 国际化

    1 前言 本篇旨在 Vue3 + Element Plus 国际化配置,支持多语言切换 2 Vue3 国际化 2....

  • 国际化:i18n实现多语言

    如果项目需要多语言的支持,我们需要做国际化 使用 vue-i18n 来实现多语言的界面 安装 关于语言包,我们有几...

  • 使用vue-i18n为vue添加多语言支持

    前言 最近项目因为国际化原因使用到了多语言,因为前端是使用vue的,后端同学就没有办法帮忙做了,而我们的vue又没...

  • i18n国际化

    vue中如何使用i18n实现国际化 一、前言 项目中需要实现多语言切换,这时候接触到国际化,前端框架无数,其中几种...

  • uni-app 语言化 Vue-i18n

    说到vue-i18n,我们并不陌生,国际化多语言实现。 1.安装依赖包 2.注入vue实例中,项目中实现调用api...

  • vue项目国际化(多语言)

    记录一下笔记,以下vue项目案例使用vue-cli搭建 ; 一.安装依赖 1. 使用npm命令安装所需依赖vue-...

  • react-intl 实现多语言

    0. 前言 最近在项目中添加了语言国际化,多语言的功能。 React-intl是雅虎的语言国际化开源项目Forma...

  • Vue项目实现国际化

    Vue项目实现国际化 一:自己配置 i18n 完成国际化 1、创建项目,在项目中安装 vue-i18n 2、在ma...

  • vue搭配i18n国际化语言插件开发多语言网站

    vue搭配i18n国际化语言插件开发多语言网站 安装过程直接略过,安装步骤链接: vue命令行工具 (CLI)vu...

网友评论

    本文标题:vue项目国际化(多语言)

    本文链接:https://www.haomeiwen.com/subject/stujvrtx.html