一、vue-i18n是什么？

示例：vue-i18n 是为了开发者做语言国际化/语言切换，而产生的。

二、使用步骤

1.安装vue-i18n

npm install vue-i18n --save

2.新建文件夹

代码如下（示例）：

en.js

module.exports = {discoverer:{   txkwxx:"Please submit the new flavors you discovered",kwm:"Flavor Name",kwsm:"Flavor description",   }
};

zh.js

module.exports = {discoverer:{   txkwxx:"请填写您发现的烟弹新口味信息",kwm:"烟弹口味名",kwsm:"口味说明",}
};

描述：en.js写英文语言包，
zh.js写中文语言包。

3.在main.js 中引入

import zh from '@/components/i18n/zh.js'
import en from '@/components/i18n/en.js'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
let language = 'en'   //默认语言
if(uni.getLocale()=='zh-Hans'){  //判断当前设备的语言，我是用的uniapp的方法language = 'zh'
}else{language = 'en'
}
const i18n = new VueI18n({locale: language, // 默认选择的语言messages: {'en': en,'zh': zh}
})
const app = new Vue({i18n,...App
})

4.在页面使用

<!--一般使用方式-->
<view class="found_title">{{$t("discoverer.txkwxx")}}</view>
<!--UI框架form组件使用的两种方式-->
<u-form-item :label="this.$t('discoverer.kwm')" prop="flavorName" borderBottom ref="item1"><u--input v-model="form.flavorName" border="none"></u--input></u-form-item>
<u-form-item :label="kwsm" prop="flavorDesc" borderBottom ref="item1"><u--textarea v-model="form.flavorDesc" border="none"></u--textarea></u-form-item>data() {return {kwsm:this.$t("discoverer.kwsm"),};},

总结

实现语言国际化的步骤其实很简单，多细心一点就没问题。

vue/uniapp实现语言国际化（中英文切换）相关推荐

uni-app使用vue-i18n实现国际化(中英文切换)
uni-app使用vue-i18n实现国际化(中英文切换) 1.导入vue-i18n(npm install vue-i18n) 2.创建common文件夹 --> lang.js export ...
react国际化中英文切换
欢迎关注微信公众号:[ 全栈攻略 ] react项目需要支持国际化,推荐插件"react-intl-universal",原因是"react-intl"存在一些 ...
SpringMVC 国际化-中英文切换
国际化是为了实现不同地区页面呈现不同的语言问题: 编写程序实现国际化,在xml文件中做响应的配置,然后编写.properties文件即可. 实现登录界面的中英文切换: xml文件配置: <!-- ...
Qt Quick实现国际化中英文切换简明图文步骤
目录前言一.步骤 1.在pro文件中添加需要生成的ts文件: 2.通过工具-外部-语言家-update 生成zh_CN.ts和en_US.ts 3.通过语言家打开生成的ts文件进行翻译 4.将zh ...
vue中如何实现实现中英文切换
一.安装 vue-i18n插件 npm i vue-i18n 二.main.js文件的配置 import VueI18n from 'vue-i18n'Vue.use(VueI18n) // 通过插件 ...
Android国际化-中英文切换
不想废话,直接上干货 @Overrideprotected void attachBaseContext(Context newBase) {Locale newLocale;if (SPUtil.g ...
iPhone 手机怎么设置App Store的显示语言，中英文切换
苹果的 App Store 语言类型取决于你的 Apple ID 账号的国籍设置,它会根据你的 Apple ID 国籍自动调整 App Store 的语言显示.要想把 App Store 设置成中文, ...
QT 语言家中英文切换
环境: vs +qt msvc 创建ts文件第一种: 工具->QT VS Tools 选择第二种: 点击ok后,生成.pro文件打开.pro文件,在.pro文件中添加 TRANSLATIO ...
多语言 - 国际化处理上
目录目标安装国际化的包 ElementUI多语言配置 1.创建src/lang/index.js 2.在main.js中挂载 i18n的插件效果国际化(i18n)处理 vue项目中的多语言支持 ...

vue/uniapp实现语言国际化（中英文切换）

文章目录

一、vue-i18n是什么？

二、使用步骤

1.安装vue-i18n

2.新建文件夹

3.在main.js 中引入

4.在页面使用

总结

vue/uniapp实现语言国际化（中英文切换）相关推荐

最新文章

热门文章